μProgress – Slim, lightweight and performant ProgressBar

μProgress

μProgress is a Slim, lightweight and really performant ProgressBar, written in vanilla JavaScript. It requires the 2 function modules “function/debounce” and “math/clamp” from mount.JS and should be used as AMD or nodeJS module (but you still can use it also directly in your browser). The script itself is compatible with all modern browsers, including 10+, 12+, 4+, 12+, 5+ and 4+.

The uProgressBar library creates smooth, GPU rendered animations, with a neat blur effect. It is really easy to use, and complete customizable!

Download the latest version of μProgress as .ZIP or as .TAR package!

npm i uprogress --save

yarn add uprogress --save

bower install uprogress --save

Instructions

The package itself contains the main JavaScript field, as well as the main Stylesheet. Both files are also available in a minified version with respective Source Maps.

 

Load μProgressBar

Make sure you load the respective Stylesheet directly in the header of your HTML document. It’s recommended to load the JavaScript files immediately after the opened <body> tag. Don’t forget to include the Mout functions (function/debounce.js and mth/clamp.js) too, if you aren’t using AMD.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/uprogress.css" />
    </head>
    <body>
        <!-- Required Mout Library -->
        <script type="text/javascript" src="/js/mout/function/debounce.js"></script>
        <script type="text/javascript" src="/js/mout/math/clamp.js"></script>

        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/uprogress.min.js"></script>
    </body>
</html>

 

Configure μProgressBar

The current version of this script offers 9 settings, but the constructor supports up to 3 arguments. The first argument is the parent element where the progressbar should be appended to. The second parameter are the settings, defined as key=>value object. And the third parameter is a boolean value which indicated, if the progressbar should be move right-to-left (rtl, true) or left-to-right (ltr, false, default).

It’s highly recommended to check out the official documentation for more informations about the settings and the single methods to control the progressbar!

document.addEventListener("DOMContentLoaded", {
    var progress = new UProgress(document.body, {
        start:          0.01,
        end:            0.99,
        duration:       25000,
        doneDuration:   100,
        fadeDuration:   200,
        class:          "uprogress",
        barClass:       "bar",
        blueClass:      "blue"
    }, false);
});

 

Configure: Options

start
The position in percentage (.35 is 35%, 1 is 100%) at which the µProgress starts.
end
The position in percentage (.35 is 35%, 1 is 100%) the µProgress is moving toward when started. Once reached, it will stop until set or done are called.
duration
The durarion in ms it takes for the µProgress to go from opts.start to opts.end.
doneDuration
The duration in ms that the µProgress take to complete when done is called.
fadeDuration
The duration in ms the µProgress takes to fade out after it has completed.
class
The CSS class to set on the µProgress element.
barClass
The CSS class to set on the µProgress bar element.
blurClass
The CSS class to set on the µProgress blur element.

Leave a Reply

Top