https://github.com/estrattonbailey/putz
A tiny progress bar with a full API and the ability to increment randomly.
https://github.com/estrattonbailey/putz
ajax progress progress-bar spa
Last synced: about 1 year ago
JSON representation
A tiny progress bar with a full API and the ability to increment randomly.
- Host: GitHub
- URL: https://github.com/estrattonbailey/putz
- Owner: estrattonbailey
- Created: 2016-09-22T22:31:48.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-07-09T16:01:10.000Z (over 8 years ago)
- Last Synced: 2025-03-15T23:15:46.610Z (about 1 year ago)
- Topics: ajax, progress, progress-bar, spa
- Language: JavaScript
- Homepage:
- Size: 19.5 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# putz
A super-small progress bar with a full API and the ability to *putz*: increment randomly to simulate loading events. **599b gzipped.**
[](http://standardjs.com)
## Install
```
npm i putz --save
```
## Usage
```javascript
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.
```css
.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](https://github.com/rstacruz/nprogress/) Slim progress bars for Ajax'y applications. by [@rstacruz](https://github.com/rstacruz)
- [nanobar](https://github.com/jacoborus/nanobar) Very lightweight progress bars. by [@jacoborus](https://github.com/jacoborus)
MIT License