百度云盘　　传送门　　密码: 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. 我爬的entityFramework的坑

    老师使用的是mysql的数据库,但是我只有sqlserver的数据库,于是就照猫画虎,想连自己的sqlserver,结果一连跳了几个坑: 坑一:appsetting中的字符串连接是后面还有个s, 坑二 ...

  2. JSTL标签+El表达式把list集合数据展示到 JSP页面

    JSP页面 <%@ page import="cn.itcast.domain.User" %><%@ page import="java.util.L ...

  3. 关于redis的几件小事(七)redis缓存雪崩与穿透

    1.缓存雪崩 (1)什么是缓存雪崩 缓存雪崩指的是在同一时刻,缓存大量失效,导致大量的请求直接到了数据库,数据库压力剧增,引起系统崩溃.可能出现的情况有: ①大量的key设置了相同的过期时间,导致在缓 ...

  4. springboot(十九)-线程池的使用

    我们常用ThreadPoolExecutor提供的线程池服务,springboot框架提供了@Async注解,帮助我们更方便的将业务逻辑提交到线程池中异步执行. 话不多说,编码开始: 1.创建spri ...

  5. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

  6. .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能

    .Net Framework4.5中Asp.net mvc使用Singal R轮训实现导入进度条功能 我的项目需求是:在.net4.5中用mvc5实现上传xml文件,后台实时导入数据库时传到前台进度, ...

  7. mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

    在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https ...

  8. 使用Ant打包工具

    由于使用java,javac,jar等工具进行编译打包,即繁琐低效又容易出错,因此Ant出现了.Ant的出现就是专门为了打包编译java代码的,使用之前得稍微学一下.Ant的运行起来主要是依靠配置文件 ...

  9. Delphi 数组与记录类型

  10. WebSocket是什么原理，为什么可以实现持久连接

    本文摘抄自知乎,原文标题:WebSocket 是什么原理?为什么可以实现持久连接? Websocket只是协议而已. 一.WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化, ...