Don't Worry, It's Free!
sign into loading.io now
SIGNUPLOGIN
or login with
Newcomer here? Sign up »Already a member? Sign In »
{{n.message}}

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.


data-preset="circle"
data-preset="bubble"
data-preset="line"
data-preset="fan"





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
10KB unzipped
well, could be smaller.





So, how do I use this thing?



Installation

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:




Styling

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>

Presets

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:



data-preset="line"
data-preset="fan"
data-preset="circle"
data-preset="bubble"



data-preset="rainbow"
data-preset="energy"
data-preset="stripe"
data-preset="text"



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



Configuration


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 draws 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 like following:



further tweaking is possible with following attributes:

attr namedescription
data-stroketweak stroke color or pattern
data-storke-widthtweak stroke width
data-stroke-trailtweak trail width color
data-storke-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, specifying 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>

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:



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 customization easier, we also provide generators for generatiing graidents, stripes and bubbles. they can be used in data-path, data-fill and data-stroke. They are designed with a data-uri favor:


'data:ldbar/res,resName(parameters...)'

currently there are 3 types of pattern available:

Gradient

syntax:

data:ldbar/res,gradient(angle,duration,colors...)

example:

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

Bubble

syntax:

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

example:

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

Stripe

syntax:

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

example:

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


Configuration

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

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

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.



JS API

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.




License

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