Progress bars in the browser that use a token/shape that moves across the screen instead of a bar that increases in width.
npm install @travishorn/progressorProgress bars in the browser that use a token/shape that moves across the screen instead of a bar
that increases in width.
Include D3 and the this library in your HTML.
``
Add a progressor to the page.
`
const p = new Progressor('body');
Update the value as often as needed. Value should be between 0 and 1.
`
p.update(0.5);
Pass an object with any of the following options.
`
const p = new Progressor('body', {
size: 100,
image: 'horse.png',
});
#### size
Default: 100
The size of the token in pixels. It is always square. Note that the progress bar itself will always
expand to the width of its parent element.
#### image
Default: (none)
The URL of a custom image to use as the moving token. Note that square images work best. If this
option is omitted, a square block is used instead.
See demo/index.html for a working demo.
These instructions will get you a copy of the project up and running on your local machine for
development and testing purposes. See the Usage section above for notes on how to use the
project on a live system.
You will need Git and Node.js installed.
Clone the repository.
`
git clone https://github.com/travishorn/progressor.git
View and edit code in src/.
Build with npm run build.
Open demo/index.html` in a web browser to see the code in action.
* Babel - Transpiling/browser support
* D3 - Adding and moving shapes on the page
* Icons8 - Horse icon in demo
* Webpack - Packaging everything up
Pull requests welcome!
This library uses SemVer for versioning. For the versions available, see the
tags on this repository.
* Travis Horn - https://travishorn.com
This project licensed under the MIT License - see the LICENSE file for details.