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 ...
随机推荐
- CentOS7通过YUM安装NGINX稳定版本
创建 nginx.repo 文件 $ cd /etc/repos.d/ $ vim nginx.repo #写入以下内容 [nginx-stable] name=nginx stable repo b ...
- Smarty内置函数之config_load
config_load的作用是: 用于从配置文件中加载变量,属性file引入配置文件名,另外若配置文件包含多个部分,可以使用属性section指定从那部分取得变量(若不指定,将会引入失败). 实例: ...
- 牛客 2B 树 (组合计数)
传送门 大意: 给定n节点树, 求划分为不超过$k$个连通块的方案数. n,k<=300. 核心观察是每个连通块深度最低的点固定以后染色方案就固定了. 所以答案为$\sum\limits_{i= ...
- 右键添加cmd notePad++快捷键
1.将以下文字复制到txt文本,将txt修改为reg执行后,邮件菜单查. Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\Directo ...
- 面向对象-this关键字的概述和应用
/* 我们曾经说过:定义名字要做到见名知意. this:是当前类的对象引用.简单的记,它就代表当前类的一个对象. 注意:谁调用这个方法,在该方法内部的this就代表谁. this的场景: 解决局部变量 ...
- JavaScript快速排序法实现数组排序
大致分三步: 1.找基准(一般是以中间项为基准) 2.遍历数组,小于基准的放在left,大于基准的放在right 3.递归 var arr = [10,8,6,9,1,7,1,13,5,1,9]; / ...
- 11、find查找
1.find查找概述 为什么要有文件查找,因为很多时候我们可能会忘了某个文件所在的位置,此时就需要通过find来查找. find命令可以根据不同的条件来进行查找文件,例如:文件名称.文件大小.文件修改 ...
- 第一篇、Python入门
一 编程与编程语言 python是一门编程语言,作为学习python的开始,需要事先搞明白:编程的目的是什么?什么是编程语言?什么是编程? 编程的目的: #计算机的发明,是为了用机器取代/解放人力,而 ...
- Spring笔记之IOC
本篇笔记忽略jar包的导入和配置文件的schema约束 1.我理解的IOC ioc,控制反转,在spring中我理解的ioc就是将需要创建的对象交由spring来创建.在spring中,可以通过配置, ...
- ArcMap常用操作
1.矢量数据融合 数据管理->制图综合->融合 Data Management Tools -> Generalization -> Dissolve