Progressbar based on CSS3 & Javascript
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.
css
js eos Apr 2, 2016
screenshot
Infinite-loading.html eos Apr 2, 2016
LICENSE
README.md
blue-bar-gradient.html
colorful-progress.html
green-circle-bar.html
ringlike-progress.html
water-wave-progress.html eos Apr 2, 2016

README.md

ProgressBar Based On CSS3 & Javascript

Ⅰ WaterWaveStyle

Preview

water-wave-progress

Usage

you may start with the initialization html or an existing html,and insert the code below into the BODY label.

<div id="canvas_wave">
	<canvas id="wave" width="200" height="200"></canvas>
	<span></span>
</div>

of course, you can change the size of canvas,but please keep WIDTH & HEIGHT the same.Also,please import the javascript in your html, you should download the javascript file from github and import like this:

<script type="text/javascript" src="water-wave-progress.js"></script>

If you want to change the ID_NAME, you just need to modify the associated code in water-wave-progress.js like this:

var canvas_wave = document.getElementById("THE_DIV_ID_YOU_WANT");
var wave = document.getElementById("THE_CANVAS_ID_YOU_WANT");

or you want to change color of wave or of number,and number's font-family just modify javascript code below:

var fillColor = "THE_COLOR_YOU_WANT"; // e.g. rgba(0,222,255, 0.5)
var fontColor = "THE_FONT_COLOR";
var fontfamily = "FONT_FAMILY_YOU_WANT"; // e.g. Times New Roman

Yeah, it's easy to use the awesome style, and be free to Pull Requests!

LICENSE

LICENSE UNDER MIT

Ⅱ InfiniteLoadingStyle

infinite-loading

Ⅲ BlueBarGradientStyle

blue-bar-gradient

Ⅳ ColorfulStyle

colorful-progress

Ⅴ GreenCircleBarStyle

green-circle-bar

Ⅵ RingLikeStyle

ringlike-progress