svg和css3创建环形渐变进度条
在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="donut">
<svg width="340" height="340" xmlns="http://www.w3.org/2000/svg" class="donut_svg">
<circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />
<circle class="circle_bar" r="150" cy="170" cx="170" stroke-width="35" stroke="url(#linearGradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
<circle class="dot" fill="#FFFFFF" fill-rule="nonzero" cx="320" cy="170" r="12"></circle>
<defs>
<linearGradient x1="0%" y1="80.9878035%" x2="96.9769965%" y2="41.7547666%" id="linearGradient">
<stop stop-color="#18A6FF" offset="0%"></stop>
<stop stop-color="#32B7FF" offset="52.7095376%"></stop>
<stop stop-color="#0094F1" offset="100%"></stop>
</linearGradient>
</defs>
</svg>
<div class="donut_copy">
<div class="donut_title">
<span class="js-donut-figure"></span><span class="donut_spic">%</span>
</div>
</div>
</div>
<script type="text/javascript">
window.onload=function () {
'use strict';
var ProgressCircle = (function () {
function ProgressCircle(percent,radius,elementClass){
this._percent = percent; //百分比
this._radius = radius; //圆的半径
this._elementClass = elementClass;
}
ProgressCircle.prototype.calcDashOffset = function () {
var circumference;
circumference = Math.PI * (2 * this._radius); //计算圆圈的周长
return Math.round(circumference - this._percent / 100 * circumference); //计算圆圈要渲染的 长度！
}
//渲染进度条
ProgressCircle.prototype.createCSS = function() {
return $("." + this._elementClass + " .circle_bar").css('stroke-dashoffset', this.calcDashOffset());
};
//读取效果
ProgressCircle.prototype.updateText = function () {
$("." + this._elementClass + " .js-donut-figure")[0].innerText = this._percent;
}
ProgressCircle.prototype.init = function() {
var _this = this;
setTimeout(function(){
_this.updateText();
return _this.createCSS();
},1000);
};
return ProgressCircle;
})();
let progress = new ProgressCircle(50, 150, 'donut');
progress.init();
}
</script>
<style type="text/css" lang="scss">
*{
padding:0;
margin:0
}
.donut{
position: relative;
}
.circle_warp{
position: relative;
top: 0;
left: 0
}
.circle_bar {
stroke-dasharray: 942.4777960769379; //计算整个圆周的周长公式为Circumstance=2*PI*Radius 2*3.14*半径（此时是半径是150）
stroke-dashoffset: 942.4777960769379;
transition: stroke-dashoffset 1200ms cubic-bezier(.99,.01,.62,.94);
}
.donut_svg{
transform: rotate(-90deg);
}
.donut_copy{
text-align: center;
width: 340px;
height: 340px;
top: 40%;
left: 0;
position: absolute;
}
.donut_title{
opacity: 0;
font-size: 42px;
color: #171717;
margin-bottom: 2px;
animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;
transform: translateX(0);
font-weight: bold;
}
.donut_spic{
content: "%";
animation: donutTitleFadeRight 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;
opacity: 0;
transform: translateY(-20px);
}
.donut__text p{
font-size: 16px;
color: #AAAAAA;
}
@keyframes donutTitleFadeLeft {
from {
opacity: 0;
transform: translateX(0);
}
to {
opacity: 1;
transform: translateX(10px);
}
}
@keyframes donutTitleFadeRight {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
</style>
</html>原文地址：根据原文思路修改的代码来实现的效果，有兴趣的可以看下
http://www.techbrood.com/zh/n...
svg和css3创建环形渐变进度条的更多相关文章
- 【iOS】环形渐变进度条实现
之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: ht ...
- 基于css3的环形动态进度条（原创）
基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...
- iOS圆弧渐变进度条的实现
由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...
- 自定义控件之圆形颜色渐变进度条--SweepGradient
前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] ...
- 详解用CSS3制作圆形滚动进度条动画效果
主 题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...
- canvas锥形渐变进度条
从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...
- 浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...
- iOS 渐变进度条
#import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @ ...
- android自己定义渐变进度条
项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种 这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相 ...
随机推荐
- ac_查看每个用户登陆服务器所使用的时间
ac 如果你想知道每个用户登录服务器所使用的时间,你可以使用 ac 命令.这个命令需要你安装acct 包(Debian)或 psacct 包(RHEL,Centos). 如果我们想知道所有用户登陆服务 ...
- redis数据库写入数据时提示redis.exceptions.ResponseError错误
今天运行Django项目在redis数据库写入数据时提示如下错误: ERROR log 228 Internal Server Error: /image_code/cf9ccd75-d274-45c ...
- webpack4的迁移
引用于https://www.jianshu.com/p/7ae252f27f09 感觉是突然之间,webpack4的消息就满天飞了,听说打包速度提高了很多,还有最大的噱头是实现了零配置,leader ...
- BucketSort（桶排序）原理及C++代码实现
桶排序假设输入数据服从均匀分布,平均情况下它的时间复杂度为O(n). 桶排序将输入数据的区间均匀分成若干份,每一份称作“桶”.分别对每一个桶的内容进行排序,再按桶的顺序输出则完成排序. 通常使用链表来 ...
- QTP基本循环异常遍历(代码方式实现)
0 环境 系统环境:win7 1 前言 在正常循环的基础下 添加异常处理遍历 一些基本操作 请看正常循环 https://www.cnblogs.com/my-ordinary/p/11739180. ...
- StringTokenizer(字符串分隔解析类型)
java.util.StringTokenizer 功效:将字符串以定界符为界,分析为一个个的token(可理解为单词),定界符可以自己指定. 1.构造函数. 1. StringTokenizer( ...
- C语言占位符（待完善）
%c 读入一个字符 %s 读入一个字符串,遇到空格制表符或者换行符时结束. %d 读入一个十进制整数 %x或者%X 读入一个十六进制整数(读出时,%x:小写,%X:大写) %o 读入一个八进制 ...
- ZOJ-1167-Trees on the Level
题解: 我的解法是用一个类似字典树结构的结构体来表示节点.看到另一种解法是用数组来映射二叉树的,开到14000就过了,但是我觉得是数据水了,因为题中说最多 256个节点,如果256个节点连成链型,除根 ...
- Python实现：生产者消费者模型（Producer Consumer Model）
#!/usr/bin/env python #encoding:utf8 from Queue import Queue import random,threading,time #生产者类 clas ...
- Inventor 卸载工具，完美彻底卸载清除干净Inventor各种残留注册表和文件
一些同学安装Inventor出错了,也有时候想重新安装Inventor的时候会出现这种本电脑windows系统已安装Inventor,你要是不留意直接安装,只会安装Inventor的附件,Invent ...