https://github.com/knadh/tinyprogressbar
tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library
https://github.com/knadh/tinyprogressbar
Last synced: 12 months ago
JSON representation
tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library
- Host: GitHub
- URL: https://github.com/knadh/tinyprogressbar
- Owner: knadh
- Created: 2014-08-13T10:28:53.000Z (almost 12 years ago)
- Default Branch: master
- Last Pushed: 2014-08-13T10:30:27.000Z (almost 12 years ago)
- Last Synced: 2025-06-04T16:53:36.049Z (about 1 year ago)
- Language: JavaScript
- Size: 121 KB
- Stars: 17
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tinyProgressbar
tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library.
It renders nice, flat progressbars fully customizable with CSS. It can display absolute values (eg: 25/300) or percentages (eg: 5%) on a progressbar. It also animates progression using CSS transitions.
Kailash Nadh, October 2014
License: MIT License
Documentation and Demo: http://nadh.in/code/tinyprogressbar
## Usage
##### Include scripts in the <head>
<link rel="stylesheet" type="text/css" href="path/tinyprogressbar.css"/>
<script type="text/javascript" src="path/tinyprogressbar.js"></script>
##### Add the container to be rendered as the progress bar
<p id="progress" data-min="0" data-max="200" data-mode="absolute"> </p>
// OR -> data attributes are optional. They can be manipulated with Javascript
<p id="progress"> </p>
##### Initialize and use
<script>
// initialize
var bar = new tinyProgressbar(document.getElementById("progress"));
// set min and max values from javascript (or use data attribute in the HTML)
bar.setMinMax(0, 100);
// set the mode (absolute = absolute numbers, percentage = percentage value %)
// or use data-mode to set it in HTML
bar.setMode("percentage");
// that's it! move the bar
bar.progress(30);
</script>