tinyProgressbar is an extremely tiny (640 bytes minified+gzipped) Javascript progressbar library
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
README.md
tinyprogressbar.css
tinyprogressbar.js
tinyprogressbar.min.js

README.md

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>