LoadingBar.js is a highly flexible, open sourced progress bar library based on SVG.
use it simply by adding a
ldBar css class to create your own progress bar.
various prebuilt styles of progress bar for you to choose, by simply adding a
You can use HTML attributes, Stylesheet or even JS API to customize it
plus no external dependency. just in vanilla JS.
create an container element with
ldBar class, and set its value by
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:
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:
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:
above example set the label text to red, bold, 2.1x larger and with the font family 'tahoma'.
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.,
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:
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.
To use a stroke type progress bar, set
stroke, and customize your path by providing SVG Path command to the
data-path attribute. Following example draws a sinle, horizontal line:
For a more complicated example, below we draw a heart with illustrator (left) and save it as SVG (right):
we can then use the path command ( red part ) in data-path attribute of our progress bar:
The result will be as following:
further tweaking is possible with following attributes:
|data-stroke||tweak stroke color or pattern|
|data-storke-width||tweak stroke width|
|data-stroke-trail||tweak trail width color|
|data-storke-trail-width||tweak trail width|
following examples demonstrate how to config with stroke and trail:
to use fill type progress bar, set
fill. loadingBar can fill either a path of an image, specified by
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
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
there are 4 possible values for data-fill-dir attribute:
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":
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:
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-stroke. They are designed with a data-uri favor:
currently there are 3 types of pattern available:
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:
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
Additionally, you can specify the pattern size to make pattern bigger or small, with
here are some examples of different pattern size:
Here is a complete list of all configurations for loading bars.
|data-type||set the progress type. can be |
growth direction of fill type progress bar. possible value:
|data-stroke-dir||growth direction of stroke type progress bar. possible value: |
|data-img||image of fill type progress bar. could be a file name or data URI.|
|data-path||SVG Path command, such as |
|data-fill||fill color, pattern or image when using a fill type progress bar with custom data-path. could be image, generated patterns or colors.|
|data-fill-background||fill color of the background shape in fill type progress bar.|
|data-fill-background-extrude||size of the background shape in fill type progress bar.|
|data-stroke||stroke color or pattern.|
|data-stroke-width||stroke width of the progress bar.|
|data-pattern-size||specify pattern size; e.g., |
|data-img-size||specify image size; e.g., |
|data-duration||bar animation duration.|
data- removed) as an object into the
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.