这几天在做一个项目，关于如何做圆环进度条的制作，找了好多方法，都无法弄成，网上给的和我想要的差了很多，收集了很多网站的链接，记录一下，方便以后查找。

Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

How to Create a Circular Progress Button

http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/

View demo Download source

http://www.gfsoso.net/?q=Circular%20Progress&pn=40

CProgress

jQuery circular progress bar

http://p.ar2oor.pl/cprogress/

http://www.crazy-coder.com/plugins/cc-circle-progress-bar/

6 Ways To Create Circular ProgressBar By Using JQuery

http://freenish.com/4-ways-to-create-circular-progressbar-by-using-jquery/

1. jquery.polartimer.js

Polartimer is a circular timer widget supporting basic options and a callback function. The polartimer plugin requiresjQuery and the Raphael SVG library.

This project is also on github.

How to use it

Downlaod

2. jQuery Knob

Demo and Download

3. CSS3 pie graph timer with jquery

Note: Changed to em’s so you just change the font-size in the timer class and everything will resize accordingly.

Demo and downlaod

4. circular progressBar by jQuery andCSS3

Demo and downlaod

5. ProgressBar.js

Beautiful and responsive progress bars with animated SVG paths. Use built-in shapes or create your own paths.

See demo page for examples.

Demo and download

6. Raphael – Polar Clock

This way is not to using jQuery, it’s using Raphael.

Demo

How to make it 

polartimer.js

Polartimer is a circular progress widget supporting basic options and a callback function.

https://github.com/ConnorDoyle/jquery.polartimer.js

100% pure css radial progress bar

Building any kind of progress bar in pure css is kind of a misnomer because after all it is a representation of some external event, and as such needs to be told what stage to represent. No matter, this is how I went about creating a radial progress bar (or circular progress bar if you prefer) in pure css3 – in a follow-up post I’ll show you how to use javascript to influence the value.

Click here to view an example of the pure css radial progress bar.

http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar

Radial progress indicator using CSS

How to use CSS3 transitions to create an animated radial progress indicator

https://medium.com/@andsens/radial-progress-indicator-using-css-a917b80c43f9

http://jsfiddle.net/andsens/32Y8U/

Animated Circular Progress Bar with jQuery and Canvas – Circle Progress

Demo Download

Circle Progress is a jQuery plugin that makes use of canvas element to draw an animated circular gradient progress bar in your web page/app.

See also:

• CProgress – jQuery Circular Progress Bar Plugin
• Circular Percentage Loader Plugin with jQuery and Canvas – ClassyLoader
• Percentage Loader – jQuery Progress Bar Plugin

jQuery Circle Progress Demos

• Download This Plugin
• Back To jQueryScript.Net

 

http://www.jqueryscript.net/demo/Animated-Circular-Progress-Bar-with-jQuery-Canvas-Circle-Progress/

 

jquery-circle-progress

jQuery Plugin to draw animated circular progress bars like this:

Check out more examples! Or maybe the crazy one?

https://github.com/kottenator/jquery-circle-progress

jquery-circle-progress

See these examples code and read the documentation on GitHub

http://kottenator.github.io/jquery-circle-progress/

Percentage Loader

A tiny jQuery plugin for displaying progress in a visual and engaging way

http://widgets.better2web.com/loader/