百度云盘　　传送门　　密码: 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. windows 安装 python 踩坑记录

    官方不建议使用 64 bit python,容易出各种问题 Unable to find vcvarsall.bat 凡是安装与操作系统底层相关的 python 扩展都会遇到这个问题,如 PIL,Pi ...

  2. 华为wlan配置流程及相关重要步骤AC配置

    本次介绍是AC+fitAP组网方式的重要步骤. 一.基础配置 1.规划好ac+ap的组网方式和转发方式.(本次以三层旁挂直接转发),规划管理vlan,业务vlan,与AC连接的vlan,以及他们接口的 ...

  3. 比较接口：Comparable和Comparator

    Comparable和Comparator是两个用于定义对象之间比较规则的接口. 一.public interface Comparator<T> Comparator接口中有两个方法(不 ...

  4. Mysql主从分离介绍及实现

    参考: http://www.cnblogs.com/panxuejun/p/5887118.html https://www.cnblogs.com/alvin_xp/p/4162249.html ...

  5. java对象的几种创建过程

    java对象的创建过程 (1)用new 语句创建对象,这是最常用的创建对象方法. 下面用一个简单的存在继承关系的实例的创建,来叙述对象创建过程中的细节 概括如下: 执行顺序:(优先级从高到低.)静态代 ...

  6. 113、stack的优势 （Swarm20）

    参考https://www.cnblogs.com/CloudMan6/p/8157391.html   stack 将应用所包含的service,依赖的secret volume 等资源,以及他们之 ...

  7. loj 6043「雅礼集训 2017 Day7」蛐蛐国的修墙方案

    loj 爆搜? 爆搜! 先分析一下,因为我们给出的是一个排列,然后让\(i\)给\(p_i\)连边,那么我们一定会得到若干个环,最后要使得所有点度数为1,也就是这些环有完备匹配,那么最后一定全是偶环. ...

  8. 图片哈希概论及python中如何实现对比两张相似的图片

    Google 以图搜图的原理,其中的获取图片 hash 值的方法就是 AHash. 每张图片都可以通过某种算法得到一个 hash 值,称为图片指纹,两张指纹相近的图片可以认为是相似图片. 以图搜图的原 ...

  9. java实现spark常用算子之map

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaRDD;import org.apache.spark.a ...

  10. 服务命令（systemctl的使用）

    常用的service与systemctl命令的对比 应用举例: ●start:开启服务 ●stop:停止服务 ●status:参数来查看服务运行情况 ●restart:重新加载服务 应用举例·: #启 ...