putz

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

  • putz

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
putz
301.0.17 years ago8 years agoMinified + gzip package size for putz in KB

Readme

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

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


MIT License