Fork me on GitHub

-- Load bar --

Light weight load bar, vanilla javascript, no css file, no dependency.

Usage

        
          npm install --save loadbar
          
          // Default color: #333, set to #E74C3C for clearer display.
          var loadbar = new Loadbar(); 

          loadbar.start();
          loadbar.done();
        
      

Will force refresh, start to render bar from 0%.

Will render to 100%, the bar will be removed from document.

Grow to 30%, not available if the bar touches pause point(default by 90%).

Grow to 50%.

Grow to 80%.

Stop render, only available when rendering.

Render a little bit, only available when pause.

Stop render, fade out and remove the bar from document, only available when rendering.

Custom Configuration

.box
          
            /* custom bar style */
            .box .bar {
              position: absolute;
              top: 0;
              right: 0;
              left: 0;
            }
            var easeInQuart = function (t, b, c, d) {
                t /= d;
                return c * t * t * t * t + b;
            };
            var loadbar2 = new Loadbar({
              height: '10px', // invalid value, will be set to 4px automatically;
              backgroundColor: '#e4393c',
              easeFunction: easeInQuart,
              zIndex: 1000, // default: 999
              startPoint: 50, // default: 30
              
              // Bar will stop at 60%,
              // once the bar touches pause point,
              // you can only call start() or done() function
              pausePoint: 60, // default: 90
              margin: '0 auto' // You can set all types of css style in options
            },
            // If the element does not exists,
            // the bar will be fixed to the top,
            // configs will remain.
            document.querySelector('.box').querySelector('.bar'));