Go to file

Kailash Nadh a3612ff6d4 Typo		2014-08-13 16:00:18 +05:30
README.md	Typo	2014-08-13 16:00:18 +05:30
tinyprogressbar.css	First commit	2014-08-13 15:56:59 +05:30
tinyprogressbar.js	First commit	2014-08-13 15:56:59 +05:30
tinyprogressbar.min.js	First commit	2014-08-13 15:56:59 +05:30

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>