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 2 months 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 8 years ago)
• Default Branch: master
• Last Pushed: 2017-07-09T16:01:10.000Z (over 7 years ago)
• Last Synced: 2024-11-15T22:15:44.339Z (2 months 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.**

[![js-standard-style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](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