We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

How to make the preloader visible

Home Forums Programming How to make the preloader visible

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #34270

    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



    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. :unsure:

    Chief 3D Verger | LinkedIn | Twitter


    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">
      <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">
      <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>
      <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] -->

    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 class="lowpanelcenter">
          <div class="div-block-3"></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



    The easiest way to implement a new preloader is to adjust the CSS properties of the old 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:

    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.

    See also video tutorials on this topic.

    Chief 3D Verger | LinkedIn | Twitter

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.