LoadingBar.js showing an empty space when included in website












6















I am trying to implement LoadingBar.js on my website,



LoadingBar.js is a JS library to make progress bars : https://loading.io/progress/



I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/






<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight :
https://ibb.co/mLDezU



Do you have an idea why it would do that ?






javascript







share|improve this question




















  • 1





    Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

    – Suhas Bhattu
    Nov 13 '18 at 12:52











  • It may be depend on other css properties which you used in your web

    – dilusha_dasanayaka
    Nov 13 '18 at 12:52











  • And what is your browser you're testing with?

    – dilusha_dasanayaka
    Nov 13 '18 at 12:56











  • What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

    – Mohammad C
    Nov 13 '18 at 13:32













  • Your provided code seems to work here on the snippet, can you share the link to your website ?

    – Towkir Ahmed
    Nov 15 '18 at 2:23
















6















I am trying to implement LoadingBar.js on my website,



LoadingBar.js is a JS library to make progress bars : https://loading.io/progress/



I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/






<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight :
https://ibb.co/mLDezU



Do you have an idea why it would do that ?






javascript







share|improve this question




















  • 1





    Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

    – Suhas Bhattu
    Nov 13 '18 at 12:52











  • It may be depend on other css properties which you used in your web

    – dilusha_dasanayaka
    Nov 13 '18 at 12:52











  • And what is your browser you're testing with?

    – dilusha_dasanayaka
    Nov 13 '18 at 12:56











  • What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

    – Mohammad C
    Nov 13 '18 at 13:32













  • Your provided code seems to work here on the snippet, can you share the link to your website ?

    – Towkir Ahmed
    Nov 15 '18 at 2:23














6












6








6


1






I am trying to implement LoadingBar.js on my website,



LoadingBar.js is a JS library to make progress bars : https://loading.io/progress/



I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/






<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight :
https://ibb.co/mLDezU



Do you have an idea why it would do that ?






javascript







share|improve this question
















I am trying to implement LoadingBar.js on my website,



LoadingBar.js is a JS library to make progress bars : https://loading.io/progress/



I tested a JSFiddle that works fine : https://jsfiddle.net/sg2uz3jx/






<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





But when I copy/paste it inside my website it just makes an empty space and does not show anything.
Here is an example of what it does in my website with source code highlight :
https://ibb.co/mLDezU



Do you have an idea why it would do that ?






<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css" />

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>



<div class="ldBar" data-value="70" style="width:200px;height:100px" data-stroke="yellow" data-preset="line"></div>





javascript




javascript






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 15 '18 at 3:44









Towkir Ahmed

1,0391720




1,0391720










asked Oct 13 '18 at 10:55









Jay D.Jay D.

111112




111112








  • 1





    Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

    – Suhas Bhattu
    Nov 13 '18 at 12:52











  • It may be depend on other css properties which you used in your web

    – dilusha_dasanayaka
    Nov 13 '18 at 12:52











  • And what is your browser you're testing with?

    – dilusha_dasanayaka
    Nov 13 '18 at 12:56











  • What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

    – Mohammad C
    Nov 13 '18 at 13:32













  • Your provided code seems to work here on the snippet, can you share the link to your website ?

    – Towkir Ahmed
    Nov 15 '18 at 2:23














  • 1





    Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

    – Suhas Bhattu
    Nov 13 '18 at 12:52











  • It may be depend on other css properties which you used in your web

    – dilusha_dasanayaka
    Nov 13 '18 at 12:52











  • And what is your browser you're testing with?

    – dilusha_dasanayaka
    Nov 13 '18 at 12:56











  • What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

    – Mohammad C
    Nov 13 '18 at 13:32













  • Your provided code seems to work here on the snippet, can you share the link to your website ?

    – Towkir Ahmed
    Nov 15 '18 at 2:23








1




1





Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

– Suhas Bhattu
Nov 13 '18 at 12:52





Try to put link and script tag inside head instead of body, link inside body sometimes causes problem

– Suhas Bhattu
Nov 13 '18 at 12:52













It may be depend on other css properties which you used in your web

– dilusha_dasanayaka
Nov 13 '18 at 12:52





It may be depend on other css properties which you used in your web

– dilusha_dasanayaka
Nov 13 '18 at 12:52













And what is your browser you're testing with?

– dilusha_dasanayaka
Nov 13 '18 at 12:56





And what is your browser you're testing with?

– dilusha_dasanayaka
Nov 13 '18 at 12:56













What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

– Mohammad C
Nov 13 '18 at 13:32







What other scripts are you using. Check your console log. I believe some other js library is interferring with your loading bar library causing it to crash or you have invalid js code somewhere and it causing an error. So loading js is not being loaded properly.

– Mohammad C
Nov 13 '18 at 13:32















Your provided code seems to work here on the snippet, can you share the link to your website ?

– Towkir Ahmed
Nov 15 '18 at 2:23





Your provided code seems to work here on the snippet, can you share the link to your website ?

– Towkir Ahmed
Nov 15 '18 at 2:23












2 Answers
2






active

oldest

votes


















0














From what I can see on the next image you have publish on your question:



https://ibb.co/mLDezU



You are including the next plugin library code:



<link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>

<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>


Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):



<html>

  <head>

    <!-- Here are your head stylesheets and meta-tags -->

  </head>



  <body>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

    <div>

      <h3>Apparence du compteur</h3>

      <br>

      <!-- Starts the wrong including of the plugin library -->

      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>

      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>

      <!-- Ends the wrong including of the plugin library -->

      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>

      <div class="row">...</div>          

    </div>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

    <div>

      <h3>Apparence du compteur 2</h3>

      <br>

      <!-- Starts the wrong including of the plugin library -->

      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>

      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>

      <!-- Ends the wrong including of the plugin library -->

      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>

      <div class="row">...</div>          

    </div>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

  </body>

</html>


So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:



<html>

  <head>

    <!-- Here are your head stylesheets and meta-tags -->

    <!-- Include stylesheet of loading-bar plugin -->

    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>

  </head>



  <body>

    <!-- Include Javascript needed for loading-bar plugin -->

    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

    <div>

      <h3>Apparence du compteur</h3>

      <br>

      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>

      <div class="row">...</div>          

    </div>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

    <div>

      <h3>Apparence du compteur 2</h3>

      <br>

      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>

      <div class="row">...</div>          

    </div>

    <!-- some code... -->

    <!-- some code... -->

    <!-- some code... -->

  </body>

</html>


If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.






share|improve this answer

































    0














    Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....






    share|improve this answer























      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52792168%2floadingbar-js-showing-an-empty-space-when-included-in-website%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown

























      2 Answers
      2






      active

      oldest

      votes








      2 Answers
      2






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      0














      From what I can see on the next image you have publish on your question:



      https://ibb.co/mLDezU



      You are including the next plugin library code:



      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>


      Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):



      <html>
      
  <head>
      
    <!-- Here are your head stylesheets and meta-tags -->
      
  </head>
      

      
  <body>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <div>
      
      <h3>Apparence du compteur</h3>
      
      <br>
      
      <!-- Starts the wrong including of the plugin library -->
      
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
      
      <!-- Ends the wrong including of the plugin library -->
      
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      
      <div class="row">...</div>          
      
    </div>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <div>
      
      <h3>Apparence du compteur 2</h3>
      
      <br>
      
      <!-- Starts the wrong including of the plugin library -->
      
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
      
      <!-- Ends the wrong including of the plugin library -->
      
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      
      <div class="row">...</div>          
      
    </div>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
  </body>
      
</html>


      So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:



      <html>
      
  <head>
      
    <!-- Here are your head stylesheets and meta-tags -->
      
    <!-- Include stylesheet of loading-bar plugin -->
      
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
      
  </head>
      

      
  <body>
      
    <!-- Include Javascript needed for loading-bar plugin -->
      
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <div>
      
      <h3>Apparence du compteur</h3>
      
      <br>
      
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      
      <div class="row">...</div>          
      
    </div>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <div>
      
      <h3>Apparence du compteur 2</h3>
      
      <br>
      
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
      
      <div class="row">...</div>          
      
    </div>
      
    <!-- some code... -->
      
    <!-- some code... -->
      
    <!-- some code... -->
      
  </body>
      
</html>


      If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.






      share|improve this answer






























        0














        From what I can see on the next image you have publish on your question:



        https://ibb.co/mLDezU



        You are including the next plugin library code:



        <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
        
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>


        Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):



        <html>
        
  <head>
        
    <!-- Here are your head stylesheets and meta-tags -->
        
  </head>
        

        
  <body>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <div>
        
      <h3>Apparence du compteur</h3>
        
      <br>
        
      <!-- Starts the wrong including of the plugin library -->
        
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
        
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
        
      <!-- Ends the wrong including of the plugin library -->
        
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
        
      <div class="row">...</div>          
        
    </div>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <div>
        
      <h3>Apparence du compteur 2</h3>
        
      <br>
        
      <!-- Starts the wrong including of the plugin library -->
        
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
        
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
        
      <!-- Ends the wrong including of the plugin library -->
        
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
        
      <div class="row">...</div>          
        
    </div>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
  </body>
        
</html>


        So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:



        <html>
        
  <head>
        
    <!-- Here are your head stylesheets and meta-tags -->
        
    <!-- Include stylesheet of loading-bar plugin -->
        
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
        
  </head>
        

        
  <body>
        
    <!-- Include Javascript needed for loading-bar plugin -->
        
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <div>
        
      <h3>Apparence du compteur</h3>
        
      <br>
        
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
        
      <div class="row">...</div>          
        
    </div>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <div>
        
      <h3>Apparence du compteur 2</h3>
        
      <br>
        
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
        
      <div class="row">...</div>          
        
    </div>
        
    <!-- some code... -->
        
    <!-- some code... -->
        
    <!-- some code... -->
        
  </body>
        
</html>


        If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.






        share|improve this answer




























          0












          0








          0







          From what I can see on the next image you have publish on your question:



          https://ibb.co/mLDezU



          You are including the next plugin library code:



          <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>


          Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):



          <html>
          
  <head>
          
    <!-- Here are your head stylesheets and meta-tags -->
          
  </head>
          

          
  <body>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur</h3>
          
      <br>
          
      <!-- Starts the wrong including of the plugin library -->
          
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
      <!-- Ends the wrong including of the plugin library -->
          
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur 2</h3>
          
      <br>
          
      <!-- Starts the wrong including of the plugin library -->
          
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
      <!-- Ends the wrong including of the plugin library -->
          
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
  </body>
          
</html>


          So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:



          <html>
          
  <head>
          
    <!-- Here are your head stylesheets and meta-tags -->
          
    <!-- Include stylesheet of loading-bar plugin -->
          
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
  </head>
          

          
  <body>
          
    <!-- Include Javascript needed for loading-bar plugin -->
          
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur</h3>
          
      <br>
          
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur 2</h3>
          
      <br>
          
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
  </body>
          
</html>


          If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.






          share|improve this answer















          From what I can see on the next image you have publish on your question:



          https://ibb.co/mLDezU



          You are including the next plugin library code:



          <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
<script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>


          Inside the html markup structure where you want to create a progress bar, i.e, you are doing something like this (if we assume you create more than one progress bar):



          <html>
          
  <head>
          
    <!-- Here are your head stylesheets and meta-tags -->
          
  </head>
          

          
  <body>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur</h3>
          
      <br>
          
      <!-- Starts the wrong including of the plugin library -->
          
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
      <!-- Ends the wrong including of the plugin library -->
          
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur 2</h3>
          
      <br>
          
      <!-- Starts the wrong including of the plugin library -->
          
      <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
      <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
      <!-- Ends the wrong including of the plugin library -->
          
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
  </body>
          
</html>


          So, instead of the previous wrong (and maybe multiple including) of the plugin library, you have to put the plugin styleshet on the head tag (Discussion about this) and the plugin javascript file only one time on the body tag. Like on the next example:



          <html>
          
  <head>
          
    <!-- Here are your head stylesheets and meta-tags -->
          
    <!-- Include stylesheet of loading-bar plugin -->
          
    <link rel="stylesheet" type="text/css" href="https://loadingio.github.io/loading-bar/dist/loading-bar.css"/>
          
  </head>
          

          
  <body>
          
    <!-- Include Javascript needed for loading-bar plugin -->
          
    <script src="https://loadingio.github.io/loading-bar/dist/loading-bar.js"></script>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur</h3>
          
      <br>
          
      <div class="ldBar" data-value="70" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <div>
          
      <h3>Apparence du compteur 2</h3>
          
      <br>
          
      <div class="ldBar" data-value="50" style="width:200px;height:100px;" data-stroke="yellow" data-preset="line"></div>
          
      <div class="row">...</div>          
          
    </div>
          
    <!-- some code... -->
          
    <!-- some code... -->
          
    <!-- some code... -->
          
  </body>
          
</html>


          If after this, the error persist, then check the developer console in search of some errors and update your question with a more precise explanation.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Nov 16 '18 at 16:51

























          answered Nov 15 '18 at 3:36









          ShiderszShidersz

          8,0522831




          8,0522831

























              0














              Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....






              share|improve this answer




























                0














                Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....






                share|improve this answer


























                  0












                  0








                  0







                  Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....






                  share|improve this answer













                  Your snippet works on Vivaldi (which it looks like you're using) and Chrome fine. Without the rest of the code for your page it's hard to say why it isn't showing for you. Try temporarily removing any other scripts one by one that might be interfering with loading-bar.js and work back from there. Or post the full page code for further analysis.....







                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Nov 20 '18 at 12:06









                  Matt ReynoldsMatt Reynolds

                  1964




                  1964






























                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52792168%2floadingbar-js-showing-an-empty-space-when-included-in-website%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -