LoadingBar.js

The following examples of the ProgressBar show several of its features. The Animation utility has been loaded so all bars move smoothly, otherwise they would respond immediately to changes in value. The values set in the floating box to the left will affect all of the bars below. 50 Inspiring Progress Bar Designs Last Updated on July 12, 2020 A progress bar is usually used to visualize the progression of an extended computer operation, such as a download, upload, file transfer, software installation, or update. Progressbar Meme (formerly Progressbar Mee, announced as Progressbar ME) is the eleventh version of ProgressbarOS in the Progressbar lineup. It is based on the notorious Windows Me, released on September 14th, 2000. 1 Sounds 2 Screens 2.1 Mobile 2.2 Desktop 3 Wallpapers 4 Themes 5 Trivia 6 Changelog 7 References Before version 0.38, Meme was named Progressbar Mee.1 It was probably planned to.

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.

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,></div>

..And is Small!

plus no external dependency. just in vanilla JS.

14KB unzipped

no external dependency

Installation

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

You can also clone the loadingBar.js Github repository and build the files by yourself.

Basic Usage

Create an element with ldBar class and set its value by data-value attribute:

By default, loadingBar.js will create a progress bar in the ldBar element for you. A corresponding ldBar JavaScript object is also created automatically and stored directly in this element, you can use the object to update bar's value with set method. Alternatively, you can use construct a new ldBar object constructor directly by passing the css selector:

<div></div><script> /* construct manually */ var bar1 = new ldBar('#myItem1'); /* ldBar stored in the element */ var bar2 = document.getElementById('myItem1').ldBar; bar1.set(60);</script>

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

Basic Styling

Progress bars in loadingBar.js are all responsive; you can use the css width and height properties to control its size. For example, this is a huge circular progres bar with width:50% :

Additionally, stroke-type progress bars are made with path elements, so you can also control their style with common svg / css attributes:

stroke-width: 10

stroke-lincap: round

stroke: red

Elements for the base grid line and the progress bar are named with class 'baseline' and 'mainline' respectively. This is quite useful when you need advanced styling. Following example makes a decent circular progress bar with shadow by tickling with 'mainline' and 'baseline' classes:

Label Styling

In above example, we used a built-in class label-center to instruct ldBar to centralize the label:

<divtext-danger'>label-center'></div>

However, you can do your own styling by tickling the 'ldBar-label' class. Label of ldBar is in fact a HTML <div> tag with 'ldBar-labal' class, so you can style it with CSS like this:

Custom Unit

Unit in label is by default '%' and controlled by the after pseudo element, so you can change it by tweaking the after pseudo element like this:

.ldBar-label:after { content: 'USD'; /* change from % to USD */ font-size: 0.6em;}

If somehow you can't use CSS to change unit, you can also specify data-unit attribute to customize unit; in this case the unit will be put in a span element inside .ldBar-label node:

<div data-unit='USD'data-preset='fan'></div><style type='text/css'> .ldBar-label span { font-size: 0.6em; color: #09f; }</style>

Presets

Besides default progress bar, there are various presets in loadingBar for you to choose. To choose a preset, use the data-preset attribute:

Following are the built-in presets shipped along with loadingBar.js:

line

fan

circle

bubble

rainbow

energy

stripe

text

Furthermore, you can config and customize your loading bar even if you have specified 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 Adobe Illustrator ( left ) and save it as SVG ( right ):

SVG Code

The Heart

we can then use the path command ( red part ) in></div>

Result

further tweaking is possible with following attributes:

attr name	description
data-stroke	tweak stroke color or pattern
data-stroke-width	tweak stroke width
data-stroke-trail	tweak trail width color
data-stroke-trail-width	tweak trail width

following examples show how to config with stroke and trail:

Note that alternatively you can style loading bar with CSS, as mentioned in previous section.

Fill Type Progress Bar

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

Image Size

LoadingBar.js use the image size to initialize the progress bar, but if you need a different size, you can use data-image-size attribute to change its size:

Fill Direction

Direction of fill type progres bar is by default from left to right. To change this direction, use data-fill-dir:

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

btt - bottom to top
ttb - top to bottom
ltr - left to right
rtl - right to left

Data Range

You can use alternative data range instead of 0 ~ 100 by data-min and data-max attributes. For exam

50 Progress Bar Gif