How to make the preloader visible

This topic has 3 replies, 2 voices, and was last updated 4 years, 2 months ago by Yuri Kovelenov.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

2020-10-17 at 8:50 pm #34270

Customer

I’ve been trying to load the preloader using the index.html file but I don’t manage to do it, any tutorial or tip of where do i have to place the code of the preloader? the tutorial in the soft8soft channel uses the “yourProjectName.html” and thats not useful then for adding other buttons. Please need some guidance, I’m quite lost here.

Thank you

2020-10-18 at 9:03 am #34275

Yuri Kovelenov

Staff

Hi,

if you’re using two .html files as we recommend in our tutorials, then the HTML/CSS code for the new preloader must go to index.html. I recall from the other topic that you managed to make it work.

Chief 3D Verger | LinkedIn | Twitter

2020-10-18 at 8:54 pm #34286

albertgavalda

Customer

Hi Yuri, it didn’t, i checked the links you sent me but could not manage to make it work. basically I’m copying the whole preloader div block from the exported code and trying to post it in index.html. In the “MyProjectName.html” I paste it just after the full-screen button div and it works perfectly, but in the index.html, i don’t find the correct place to paste it to make it work.

this is the index.html i have:

<!DOCTYPE html>
<!--  This site was created in Webflow. http://www.webflow.com  -->
<!--  Last Published: Mon Sep 14 2020 08:59:39 GMT+0000 (Coordinated Universal Time)  -->
<html data-wf-page="5f5cad6f9d335b7dd79c7759" data-wf-site="5f5cad6f9d335b96d59c7758">
<head>
  <meta charset="utf-8">
  <title>Albert's Blank Site</title>
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta content="Webflow" name="generator">
  <link href="css/normalize.css" rel="stylesheet" type="text/css">
  <link href="css/webflow.css" rel="stylesheet" type="text/css">
  <link href="css/alberts-blank-site-15283e.webflow.css" rel="stylesheet" type="text/css">
  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
  <script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>
  <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon">
  <link href="images/webclip.png" rel="apple-touch-icon">
</head>
<body>
  <div class="html-embed w-embed w-iframe"><iframe width="100%" height="100%" frameborder="0" src="https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:9ea5d1f599/applications/00_TEST/00_TEST.html"></iframe></div>
  <div class="lowpanelcenter">
    <div class="div-block">
      <div class="button ing_button"><a href="https://www.instagram.com/myprojectname/" target="_blank" class="iglink w-inline-block"></a></div>
      <div class="button aboutus_button"><a href="https://www.myprojectname.es/" target="_blank" class="contact-us w-inline-block"></a></div>
      <div class="button contactus_button"><a href="mailto:info@info.es" class="email w-inline-block"></a></div>
    </div>
  </div>
  <script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f5cad6f9d335b96d59c7758" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
  <script src="js/webflow.js" type="text/javascript"></script>
  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
</body>
</html>

and this is the preloader segment of the index.html exported from the preloader custom designed.

  <div class="div-block-5"></div>
  <div id="preloader_div" class="preloader_div">
    <div class="div-block-6">
      <div class="div-block4 w-clearfix">
        <div id="progress_bar" class="progressbar_div"></div>
        <div class="div-block-2"></div>
        <div id="percentage" class="text-block">0%</div>
      </div>
    </div>
    <div class="lowpanelcenter">
      <div class="div-block-3"></div>
    </div>
  </div>

Please help me find the place to where I have to paste it or what do i have to do. I beg you xd

Thank you

2020-10-19 at 10:50 am #34307

Yuri Kovelenov

Staff

Hi,

The easiest way to implement a new preloader is to adjust the CSS properties of the old preloader.

https://www.soft8soft.com/docs/manual/en/introduction/Styling-Verge3D-Apps.html#preloader

A more advanced way is to add a non-transparent div to index.html, so that it covers the default preloader completely.

Then you can display percentage in this div using this puzzle:
https://www.soft8soft.com/docs/manual/en/puzzles/Initialization.html#setup_preloader

Finally, you can implement a loading progress bar by increasing the length of a div element according to the provided percentage. See the example by the link above.