By continuing to browse this site, you are agreeing to our latest Privacy Policy and Term of Use. OK Detail..

Loading Bar

Flexible JavaScript Progress Bar Library

Download Now

Toward Flexibility

LoadingBar.js is a highly flexible, open sourced progress bar library based on SVG.

Ease of Use

use it simply by adding a ldBar css class to create your own progress bar.

<div class="ldBar"></div>

Rich Presets

various prebuilt styles of progress bar for you to choose, by simply adding a data-preset attribute.


Highly Configurable

You can use HTML attributes, Stylesheet or even JS API to customize it

<div class="ldBar" style="width:100%;height:60px", data-stroke="data:ldbar/res,gradient(0,1,#9df,#9fd,#df9,#fd9)", data-path="M10 20Q20 15 30 20Q40 25 50 20Q60 15 70 20Q80 25 90 20" ></div>

...And is Small!

plus no external dependency. just in vanilla JS.

4KB zipped
11KB unzipped
well, could be smaller.

So, how do I use this thing?


download loading bar JS and CSS files ( or, the zipped pack ) and include them in your HTML:

<link rel="stylesheet" type="text/css" href="loading-bar.css"/> <script type="text/javascript" src="loading-bar.js"></script>

Basic Usage

create an container element with ldBar class, and set its value by data-value attribute:

<div class="ldBar" data-value="50"></div>

loadingBar.js stores the corresponding ldBar Object directly in this element, which could be used to set new value by the set method; or, you can use the ldBar constructor directly by passing the css selector:

<div id="myItem1"></div> <script> var bar1 = new ldBar("#myItem1"); var bar2 = document.getElementById('myItem1').ldBar; bar1.set(60); </script>

now you have a progress bar with default style, showing 60% as its value:


Progress bars in loadingBar are all responsive; you can set width and height by css to control its size. For example, here is a half-screen width circular progres bar:

here we also use a class label-center to centralize the label:

<div class="ldBar label-center" style="width:50%;height:50%;margin:auto" data-value="35" data-preset="circle" ></div>

Label Styling

To style label, just use css. Label here is in fact a HTML <div> tag with "ldBar-labal" class, so you can style it with CSS like this:

<style type="text/css"> .ldBar-label { color: red; font-family: tahoma; font-size: 2.1em; font-weight: 900 } </style>

above example set the label text to red, bold, 2.1x larger and with the font family 'tahoma'.

Customize Unit

the unit ( default as "%" in the label ) is configured with CSS in the "after" pseudo class of .ldBar-label. So you can use CSS to tweak it, e.g.,

<style type="text/css"> .ldBar-label:after { content: "USD" color: #aaa; margin-left: 5px; font-family: courier new; font-size: 0.7em; font-weight: 200; } </style>


In above example we use the circle preset; Besides default progress bar, there are various presets in loadingBar for you to choose. To use progres bar preset, set the data-preset attribute in container:

<div data-preset="fan" class="ldBar label-center" data-value="35" ></div>

and here are the presets currently available:



furthermore, you can still add your own configuration over these preset to alter their appearance. We will cover this part in the folloing section.


You can adjust the appearance of progress bar by setting HTML attribute or passing the configuration into JS constructor. To know how to config progress bar, we should first know that there are two kinds of progress bars:

Here we first talk about the stroke type progress bar.

Stroke Type Progress Bar

To use a stroke type progress bar, set data-type to stroke, and customize your path by providing SVG Path command to the data-path attribute. Following example draws a sinle, horizontal line:

<div class="ldBar" data-type="stroke" data-path="M10 10L90 10"> </div>

For a more complicated example, below we draw a heart with illustrator (left) and save it as SVG (right):

<svg> <path fill="none" stroke="#ed2024" d="M90.5,23.2c0-12.5-10.2-22.7-22.7-22.7 c-13.6,0-20.9,8.6-22.3,13.8C44.3,8.9, 35.1,0.5,23.2,0.5C10.7,0.5,0.5,10.7, 0.5,23.2c0,22.2,36.5,45.3,45,55.9 C53.5,67.3,90.5,46.3,90.5,23.2z"/> </svg>

we can then use the path command ( red part ) in data-path attribute of our progress bar:

<div class="ldBar label-center" data-type="stroke" data-path="M90.5,23.2c0-12.5-10 ..( ignore ).. 46.3,90.5,23.2z" ></div>

The result will be as following:

further tweaking is possible with following attributes:

attr namedescription
data-stroketweak stroke color or pattern
data-stroke-widthtweak stroke width
data-stroke-trailtweak trail width color
data-stroke-trail-widthtweak trail width

following examples demonstrate how to config with stroke and trail:

<div class="ldBar label-center" data-type="stroke" data-path="..." data-stroke="red" data-stroke-width="20"></div>
<div class="ldBar label-center" data-type="stroke" data-path="..." data-stroke-trail="gray" data-stroke-trail-width="10"></div>

Fill Type Progress Bar

to use fill type progress bar, set data-type to fill. loadingBar can fill either a path of an image, specified by data-path and data-img respectively:

<div data-type="fill" data-path="M90.5,23.2c0-12 ... 23.2z" ></div>
<div data-type="fill" data-img="kirby-dance.svg" ></div>

Image Size

LoadingBar.js infers image dimension by loading image with new Image() method, but sometimes it might get different result in different browsers. To specify a image dimension, use data-image-size attribute"

<div data-type="fill" data-img="myPic.gif" data-img-size="100,100"></div>

Fill Direction

Fill type progress bar is useful when we need additional information in progress bar, such as stage information. Here we use a custom image and change the fill direction with data-fill-dir:

<div data-type="fill" data-fill-dir="btt" data-img="stage.svg"></div>
<div data-type="fill" data-fill-dir="ltr" data-img="stage.svg"></div>

there are 4 possible values for data-fill-dir attribute:

Data Range

You can use alternative data range instead of 0 ~ 100 by data-min and data-max attributes. For example, following code generates a bar that is empty with value "59" / full with value "87":

<div data-min="59" data-max="87"></div>


Data Precision

Loading Bar rounds values by default, but you can use data-precision to control how values are rounded. To round to the fourth decimal places, use data-precision="0.0001":

<div data-type="fill" data-precision="0.0001"> </div>

Styling Background

We can also control the color and size of the base image with data-fill-background (for color) and data-fill-background-extrude (for size) attributes:

<div data-type="fill" data-fill-background="#9df" data-fill-dir="ltr" data-img="stage.svg"></div>  
<div data-type="fill" data-fill-background-extrude="5" data-fill-background="#9df" data-fill-dir="ltr" data-img="stage.svg"></div>
<div data-type="fill" data-fill-background-extrude="5" data-fill-background="#9df" data-fill-dir="ltr" data-img="stage.svg"></div>

Pattern Generator

To make it easier to customize your progress bar, we provide generators for generating patterns including graident, stripe and bubbles. they can be used in data-path, data-fill and data-stroke. They are designed with a data-uri favor:


currently there are 3 types of pattern available:





<div class="ldBar" data-stroke="data:ldbar/res,gradient(0,1,#f99,#ff9)" ></div>



data:ldbar/res,bubble(colorBk, colorBubble, count, duration)


<div data-type="fill" data-path="M10 10L90 10L90 90L10 90Z" class="ldBar" data-fill="data:ldbar/res,bubble(#248,#fff,50,1)" ></div>



data:ldbar/res,stripe(color1, color2, duration)


<div class="ldBar" data-stroke="data:ldbar/res,stripe(#ff9,#fc9,1)" ></div>

Custom Pattern Images

If the above generator can't fit your need, you can also use your own pattern images. To use image to fill / stroke progress bar, simply put the image URL in data-fill / data-stroke attributes. For example, this progress bar is filled with a cloud animation:

  <div class="ldBar" data-preset="bubble" data-pattern-size="64" data-fill="https://loading.io/mod/pattern/cloud/index.svg" style="width:200px;height:200px" ></div>  

While making animated patterns is not a trivial task, Loading.io provides a rich pattern library "Loading Patterns" for you to choose; here are some sample patterns from "loading patterns":

All patterns from loading.io are seamless repeatable and animatable and can still be generated in static form. Don't forget to take a look if there is anything you need.

Go to Loading Patterns

Pattern Sizing

Additionally, you can specify the pattern size to make pattern bigger or small, with data-pattern-size attribute:

<div data-preset="bubble" data-pattern-size="10"></div>

here are some examples of different pattern size:


Here is a complete list of all configurations for loading bars.

data-typeset the progress type. can be stroke or fill.

growth direction of fill type progress bar. possible value: ttb / rtl / ltr / btt.

  • ttb - top to bottom
  • btt - bottom to top
  • ltr - left to right
  • rtl - right to left
data-stroke-dirgrowth direction of stroke type progress bar. possible value: normal / reverse
data-imgimage of fill type progress bar. could be a file name or data URI.
data-pathSVG Path command, such as M10 10L90 10. used both in stroke and fill type progress bar.
data-fillfill color, pattern or image when using a fill type progress bar with custom data-path. could be image, generated patterns or colors.
data-fill-backgroundfill color of the background shape in fill type progress bar.
data-fill-background-extrudesize of the background shape in fill type progress bar.
data-strokestroke color or pattern.
data-stroke-widthstroke width of the progress bar.
data-stroke-trailtrail color.
data-stroke-trail-widthtrail width.
data-pattern-sizespecify pattern size; e.g., 100
data-img-sizespecify image size; e.g., 200,100
data-minminimal value
data-maxmaximal value
data-precisioncontrol how values are rounded. e.g., "0.01" rounds values to second decimal place.
data-durationbar animation duration.


You can use JavaScript to initialize a progress bar. Passing above configuration (with data- removed) as an object into the ldBar constructor:

var bar = new ldBar(".mySelector", { "stroke": '#f00', "stroke-width": 10 });

Browser Compatibility

tl;dr - Support Modern Browsers and IE >= 10

LoadingBar.js is based on several nowaday web technologies supported by modern browsers except IE.

SMIL can help keep complicated animation minimized and the patterns still look ok in IE without animation, so you can consider using them even you want to support IE >= 10. otherwise, use your own GIF for IE>=10 compatibility in animated fill patterns.


This project is released under MIT License; check out our Github Repo for more information.

Sign Into Loading.io
By clicking {{auth.isSignIn && 'LOGIN' || 'SIGNUP'}}, you agree to our Terms and Privacy Policy.
or login with
Newcomer here? Sign up »Already a member? Sign In »