microbar – A lightweight JavaScript library for Slim Progress Bars

microbar

The microbar pure vanilla JavaScript is a really lightweight (1.2 kb, minified and g-zipped) ProgressBar for AJAX web applications. It is inspired by YouTube and GitHub, and works completely without any dependencies! The script is also usable as AMD, UMD and nodeJS module and works seamless with the Webpack JavaScript Bundler.

The author doesn’t offer any Browser Compatibility, but it should work in all modern browsers including the Internet Explorer 11+. (It doesn’t work on the Internet Explorer 9, even if you include the classList Polyfill)!

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

npm i microbar --save

yarn add microbar --save

bower install microbar --save

Instructions

The package itself contains just a single JavaScript file, which is also available as minified version.

 

Load microbar

Embed the single JavaScript file directly within the header of your HTML document.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/microbar.min.js"></script>
    </head>
    <body>
        <!-- Your Document -->
    </body>
</html>

 

Configure microbar

The current version of the microbar script offers 4 options to design and setup your progress bar. Move, Colorize and Change the Speed with the following methods:

document.addEventListener("DOMContentLoaded", {
    // The microbar will be added as `alds` into the window object
    var microbar = alds;

    var bar = new microbar({
        percentage: 0,
        color:      "black",
        speed:      10,
        target:     "top" 
    });
    
    // Move Progress Bar (Percentage, between 1 and 100)
    bar.moveTo(95);
    
    // Colorize your ProgressBar
    bar.setColor("red");
    
    // Change the Speed of your ProgressBar
    bar.setSpeed(5);
    
    // Get current Color and Speed
    bar.getColor();
    bar.getSpeed();
});

 

Configure: Options

percentage
Initial starting position of progress bar (between 0 and 100).
color
Color of your progress bar.
speed
Speed of your progress bar (between 1 and 10).
target
ID of your targetted DOM element. By default, it will be fixed to top of document.

Leave a Reply

Top