putz

A super-small progress bar with a full API and the ability to putz: increment randomly to simulate loading events. 599b gzipped.

Install

npm i putz --save

Usage

import putz from 'putz'
 
/**
 * Default
 *
 * Inserts loader as first child of
 * document.body, with default options
 */
const loader = putz()
 
/**
 * With options
 */
const loader = putz(document.getElementById('header'), {
  classname: 'putz',
  speed: 200,
  trickle: 5
})
 
// Start loading
loader.start()
 
// Randomly increment
loader.inc()
 
// Increment by 15
loader.inc(15)
 
// Go to 50%
loader.go(50)
 
// Randomly increment every 100ms
loader.putz(100)
 
// Go to 100% and hide
loader.end()
 
// Remove bar from DOM
loader.destroy()

Recommended CSS

Replace putz here with the classname you passed to the classname option, and replace transition speed with the value passed to the speed option.

.putz {
  position: fixed;
  width: 100%;
  left: 0; top: 0;
  z-index: 1000;
}
.putz__inner {
  position: absolute;
  width: 100%;
  left: 0; top: 0;
  height: 2px;
  background-color: #00C9FC;
  transition: transform 200ms ease-in-out; 
  transform: translateX(-100%);
}

Related Projects

• nprogress Slim progress bars for Ajax'y applications. by @rstacruz
• nanobar Very lightweight progress bars. by @jacoborus

MIT License