百度云盘　　传送门　　密码: 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. c++学习之对象和类——构造函数和析构函数

    再认真理一遍~ 0.类 这里先来定义一个类,便于后面的理解.参考C++ Primer Plus class Stock { private: std::string company; long sha ...

  2. MySQL创表--分页--自关联--

    创建表book create table t_book( id int unsigned auto_increment primary key, bookName varchar(255) defau ...

  3. Docker 容器简介与部署

    关于Docker容器技术 参考文献:<docker 从入门到精通> Docker容器简介 Docker的构想是要实现 "Build,Ship and Run Any App,An ...

  4. docopt 安装及基本应用

    什么是 docopt docopt是一种python 编写的命令行执行脚本的交互语言. 它是一种语言! 它是一种语言! 它是一种语言! 使用这种语言可以在自己的脚本中,添加一些规则限制,这样脚本在执行 ...

  5. @Resource与@Autowired注解的区别踩坑者入

    一.写本博文的原因 有些童鞋搞不为什么要用@Resource或者@Autowired,咱们一起研究下 @Resource默认按照名称方式进行bean匹配,@Autowired默认按照类型方式进行bea ...

  6. Binding的简单使用

    Binding可以看作是数据的桥梁,两端分别为Source和Target,一般情况,Source是逻辑层的对象,Target是UI层的控件对象,可以将数据从逻辑层送往UI层展现 简单的例子: clas ...

  7. ARC 100 C - Linear Approximation题解---三分法

    题目链接: https://arc100.contest.atcoder.jp/tasks/arc100_a 分析: 比赛时做这题想到一个瞎搞的方法就是在平均数上下波动一下取最小值,然后大佬yjw学长 ...

  8. 本人亲测-Setup Factory打包教程(整理并优化)

    Setup Factory 9 总结 一:安装完毕立刻启动 result = Shell.Execute(SessionVar.Expand("%AppFolder%\\消息助手.exe&q ...

  9. vue中监听数据变化 watch

    今天做项目的时候,子组件中数据(原本固定的数据)需要父组件动态传入,如果一开始初始化用到的数据.但当时还没有获取到,初始化结束就不会更新数据了.只有监听这两个属性,再重新执行初始化. 1.watch是 ...

  10. 一个div多个图表共用一个图例

    想实现一个图例(公司名),点击让div中三个图表进行显示相应的数据,并渲染到图表中(公司数据可能很多,让其默认显示三条数据),并且每个图表都有相应的标题和datazoom区域展示,点击下拉框会进行相应 ...