JS框架_(Progress.js)圆形动画进度条
百度云盘 传送门 密码: 6mcf
圆形动画进度条效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
p {
position: fixed;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
font-size: 40px;
font-weight: 900;
color:#6495ED;
text-shadow: 0 0 50px black;
text-transform: capitalize;
font-family: 'Roboto','Helvetica','Arial',sans-serif;
letter-spacing: 5px;
}
</style>
<body> <p>Gary</p> <canvas id="my_html" width="300" height="300"></canvas>
<canvas id="css" width="300" height="300"></canvas>
<script src="js/progress.js"></script>
<script>
var p1 = new Progress({
el:'my_html',//canvas元素id
deg:30,//绘制角度
timer:10,//绘制时间
lineWidth:20,//线宽
lineBgColor:'#e2e2e2',//底圆颜色
lineColor:'#e4393c',//动态圆颜色
textColor:'#000',//文本颜色
fontSize:50,//字体大小
circleRadius:100//圆半径
}); var p2 = new Progress({
el:'css',//canvas元素id
deg:75,//绘制角度
timer:30,//绘制时间
lineWidth:20,//线宽
lineBgColor:'#e2e2e2',//底圆颜色
lineColor:'#e4393c',//动态圆颜色
textColor:'#000',//文本颜色
fontSize:40,//字体大小
circleRadius:100//圆半径
}); </script>
</body>
</html>
index.html
实现过程
progress.js加载圆形进度条
ProgressJs 是个 JavaScript 和 CSS3 库,用来创建网页上每个对象的管理进度条。(可以自定义进度条模板)
开源项目：传送门
Progress 对象属性
labels ：返回进度条的标记列表
max ：设置或返回进度条的 max 属性值
position： 返回进度条的当前位置
value ：设置或返回进度条的 value 属性值。labels 返回进度条的标记列表
<script src="js/progress.js"></script>
<script>
var p1 = new Progress({
el:'my_html',//canvas元素id
deg:30,//绘制角度
timer:10,//绘制时间
lineWidth:20,//线宽
lineBgColor:'#e2e2e2',//底圆颜色
lineColor:'#e4393c',//动态圆颜色
textColor:'#000',//文本颜色
fontSize:50,//字体大小
circleRadius:100//圆半径
}); var p2 = new Progress({
el:'css',//canvas元素id
deg:75,//绘制角度
timer:100,//绘制时间
lineWidth:20,//线宽
lineBgColor:'#e2e2e2',//底圆颜色
lineColor:'#e4393c',//动态圆颜色
textColor:'#000',//文本颜色
fontSize:40,//字体大小
circleRadius:100//圆半径
}); </script>
JS框架_(Progress.js)圆形动画进度条的更多相关文章
- JS框架_(JQuery.js)纯css3进度条动画
百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...
- JS框架_(JQuery.js)绚丽的3D星空动画
百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- JS框架_(JQuery.js)圆形多选菜单选项
百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
- JS框架_(JQbar.js)柱状图动态百分比进度条特效
百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...
- JS框架_(JQuery.js)Tooltip弹出式按钮插件
百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...
- JS框架_(Laydate.js)简单实现日期日历
百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...
- JS框架_(Popup.js)3D对话框窗口插件
百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...
随机推荐
- Nginx(高并发)
Nginx(engine x)高性能和反向代理的web服务器反向代理:保护客户资源,只要是http协议都可以Web服务器:IIS 阿帕奇 NginxNginx可以作为负载均衡(NLB只支持Http)我 ...
- Linq Distinct 自定义比较
private class MyMenuComparer : IEqualityComparer { public bool Equals(ParMenu x, ParMenu y){ return ...
- RBAC（基于角色的访问控制）用户权限管理数据库设计
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...
- 本人亲测-Setup Factory打包教程(整理并优化)
Setup Factory 9 总结 一:安装完毕立刻启动 result = Shell.Execute(SessionVar.Expand("%AppFolder%\\消息助手.exe&q ...
- 为什么选择器:last-child有时没有起作用?
想要有.list样式的最后一个不要下划线.为什么:last-child没有起作用? el:last-child 的匹配规则是:第一步,查找 el 选择器匹配元素的所有同级元素(siblings):第二 ...
- this(ES6箭头函数里的this)
一,了解前须知 1,箭头函数:出现的作用除了让函数的书写变得很简洁,可读性很好外:最大的优点是解决了this执行环境所造成的一些问题.比如:解决了匿名函数this指向的问题(匿名函数的执行环境具有全局 ...
- 仿造email后缀搜索功能（2）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 垃圾回收gc --翻译
原文在https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management.基本保持了平译,并在一些地方做了概念解释.(转 ...
- Cypress自动化测试系列之三
本文技术难度★★★,如果前编内容顺利执行,请继续. 如果Selenium尚无法灵活运用的读者,本文可能难度较大. “理论联系实惠,密切联系领导,表扬和自我表扬”——我就是老司机,曾经写文章教各位怎么打 ...
- jq事件操作汇总
bind() 向匹配元素附加一个或更多事件处理器blur( ) 触发.或将函数绑定到指定元素的 blur 事件change() 触发.或将函数绑定到指定元素的 ...