百度云盘　　传送门　　密码: 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)圆形动画进度条的更多相关文章

  1. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

  2. JS框架_(JQuery.js)绚丽的3D星空动画

    百度云盘: 传送门 密码:8ft8 绚丽的3D星空动画效果(纯CSS) (3D星空动画可以用作网页背景,Gary为文本文字) <!doctype html> <html lang=& ...

  3. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

  4. JS框架_(JQuery.js)圆形多选菜单选项

    百度云盘 传送门 密码:zb1c 圆形多选菜单选项效果: <!DOCTYPE html> <html lang="en" > <head> &l ...

  5. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

  6. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  7. JS框架_(JQuery.js)Tooltip弹出式按钮插件

    百度云盘 传送门 密码:7eh5 弹出式按钮效果 <!DOCTYPE html> <html > <head> <meta charset="UTF ...

  8. JS框架_(Laydate.js)简单实现日期日历

    百度云盘 传送门 密码:71hf JavaScript日期与时间组件_____laydate.js 日期日历效果: <!DOCTYPE html> <html> <hea ...

  9. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

随机推荐

  1. linux yum安装过程终止方法

    //中断当前的安装显示 ctrl+z //查找当前yum相关的进程 ps -ef | grep yum //杀掉进程 进程号(pid)

  2. CSS(下)

    目录 CSS(下) CSS属性相关 宽和高 字体属性 背景属性 边框 border-radius display属性 CSS盒子模型 margin外边距 padding内填充 浮动(float) 限制 ...

  3. java 给定一个日期期间 返回形如Mar 2015 3/20-3/31的数据

    最近一个项目中有个前台对于表头要求: 给定一个日期期间返回形如 Mar 2015 3/20-3/31Apr 2015 4/1-4/30 这样的月年数据,简单的写了下代码,暂时没想到更好的办法 例如传进 ...

  4. MySQL两种内核对比

    MySQL内核 https://blog.csdn.net/baichoufei90/article/details/83504446 关键字:全文索引 索引外置 两种内核:MyISAM 和InnoD ...

  5. Linux Exploit系列之四 使用return-to-libc绕过NX bit

    使用return-to-libc绕过NX bit 原文地址:https://bbs.pediy.com/thread-216956.htm 这篇讲解的比较好,主要的问题是获得system地址和exit ...

  6. namenode datanode理解

        HDFS是以NameNode和DataNode管理者和工作者模式运行的.          NameNode管理着整个HDFS文件系统的元数据.从架构设计上看,元数据大致分成两个层次:Name ...

  7. navicat for mysql 12 的破解安装和基本操作

    需要安装Navicat软件 可以复制百度云链接,若失效,请联系我,我会尽快回复 将链接中的破解文件复制到软件安装的位置即完成破解 链接:https://pan.baidu.com/s/1sIkjsd3 ...

  8. 使用GDB和GEF进行调试

    使用GDB进行调试 这是编译ARM二进制文件和使用GDB进行基本调试的简单介绍.在您按照教程进行操作时,您可能需要按照自己的习惯使用ARM程序集.在这种情况下,你要么需要一个备用的ARM设备,或者你只 ...

  9. 关于windows下无法删除文件，需要TrueInstaller权限的问题

    笔者办公室的笔记本今天突然弹出来一个ie浏览器,这不是为了下载其他浏览器而存在的浏览器吗?现在还臭不要脸的弹出来,然鹅我在删除文件夹的时候,提示我无法删除,必须要有TrueInstaller的权限,那 ...

  10. trigger添加及表达式

    创建触发器 点击Configuration(配置) → Hosts(主机) 点击hosts(主机)相关行的trigger 点击右上角的创建触发器(create trigger) name : 触发器名 ...