HTML5canvas实现渐变色圆形进度条特效源码.zip资源-CSDN文库

共12个文件

css：3个

js：2个

jpg：2个

版权申诉

html5

159 浏览量 2022-11-03 23:36:28 上传评论收藏 55KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

HTML5 canvas实现渐变色圆形进度条特效源码.zip （12个子文件）

132689839447359971

jquery_circle_progress

css

page-styles.css 2KB

default.css 6KB

normalize.css 2KB

2.jpg 23KB

1.jpg 25KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 2KB

examples.js 4KB

dist

circle-progress.js 12KB

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 canvas带渐变色的圆形进度条动画</title> <link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" href="css/page-styles.css"> <link href="http://fonts.useso.com/css?family=Open+Sans:300" rel="stylesheet">  </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>HTML5 canvas带渐变色的圆形进度条动画 <span>jQuery Plugin to draw animated circular progress bars</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <div class="htmleaf-content bgcolor-8"> <div class="circles"> <div class="first circle"> <span>no <br/> animation</span> </div> <div class="second circle"> <strong></strong> <span>animation <br/> progress</span> </div> <div class="third circle"> <strong></strong> <span>value <br/> progress</span> </div> <div class="forth circle"> <span>solid fill, <br/> custom angle</span> </div> <div class="fifth circle"> <span>image fill, <br/> custom sizes</span> </div> </div> <div class="htmleaf-demo center"> <a href="#" id="demo-reset">Reset</a> <a href="#" id="demo-play">Play</a> </div> </div> </div> <script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> <script src="dist/circle-progress.js"></script> <script src="js/examples.js"></script> </body> </html>

评论收藏

内容反馈

版权申诉