Naughty Platypus Memorabilia

    nanobar

    0.4.2 • Public • Published

    nanobar

    Very lightweight progress bars (~699 bytes gzipped).

    Compatibility: iE7+ and the rest of the world

    npm version Bower version

    Demo

    See nanobar.jacoborus.codes

    Installation

    Download and extract the latest release or install with package manager:

    Bower:

    $ bower install nanobar
    

    npm:

    $ npm install nanobar
    

    Usage

    Load

    Link nanobar.js from your html file

    <script src="path/to/nanobar.min.js"></script>

    or require it:

    var Nanobar = require('path/to/nanobar');

    Generate progressbar

    var nanobar = new Nanobar( options );

    options

    • id <String>: (optional) id for nanobar div
    • classname <String>: (optional) class for nanobar div
    • target <DOM Element>: (optional) Where to put the progress bar, nanobar will be fixed to top of document if no target is passed

    Move bar

    Resize the bar with nanobar.go(percentage)

    arguments

    • percentage <Number> : percentage width of nanobar

    Example

    Create bar

    var options = {
        classname: 'my-class',
      id: 'my-id',
        target: document.getElementById('myDivId')
    };
     
    var nanobar = new Nanobar( options );
     
    //move bar
    nanobar.go( 30 ); // size bar 30%
    nanobar.go( 76 ); // size bar 76%
     
    // size bar 100% and and finish
    nanobar.go(100);

    Customize bars

    Nanobar injects a style tag in your HTML head. Bar divs has class .bar, and its containers .nanobar, so you can overwrite its values.

    Default css:

    .nanobar {
      width: 100%;
      height: 4px;
      z-index: 9999;
      top:0
    }
    .bar {
      width: 0;
      height: 100%;
      transition: height .3s;
      background:#000;
    }

    You should know what to do with that ;)




    © 2016 jacoborus - Released under MIT License

    Install

    npm i nanobar

    DownloadsWeekly Downloads

    3,257

    Version

    0.4.2

    License

    MIT

    Last publish

    Collaborators

    • jacoborus