LoadingBar.js showing an empty space when included in website

Question

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

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:

Do you have an idea why it would do that ?

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
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, Nov 15 '18 at 02:23

score 0 · Answer 1 · edited May 25 '19 at 10:30

From what I can see in the image you included in the question, 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.

score 0 · Answer 2 · answered Nov 20 '18 at 12:06

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

LoadingBar.js showing an empty space when included in website

2 Answers2