Progress 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.
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/@travishorn/progressor"></script>
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',
});
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.
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.