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来绘制出来的,网上也有相似的,可是代码那是相 ...
随机推荐
- HDU-4578 Transformation（线段树的多种区间操作）
http://acm.hdu.edu.cn/showproblem.php?pid=4578 Time Limit: 15000/8000 MS (Java/Others) Memory Lim ...
- android studio 通过界面快速查看md5
https://www.jianshu.com/p/989c0be557f0
- LinkedList源码剖析
LinkedList简介 LinkedList是基于双向循环链表(从源码中可以很容易看出)实现的,除了可以当做链表来操作外,它还可以当做栈.队列和双端队列来使用. LinkedList同样是非线程安全 ...
- iOS涂色涂鸦效果、Swift仿喜马拉雅FM、抽屉转场动画、拖拽头像、标签选择器等源码
iOS精选源码 LeeTagView 标签选择控件 为您的用户显示界面添加美观的加载视图 Swift4: 可拖动头像,增加物理属性 Swift版抽屉效果,自定义转场动画管理器 Swift 仿写喜马拉雅 ...
- PXE自动部署工具
1.工具介绍1.1::本工具主要以图形界面的方式帮助使用者快速部署PXE安装Linux的基础环境环境,(如不需要可忽略相关操作)并且支持自动配置静态IP地址和为H3C设备划分VLAN. 1.2::对于 ...
- CSS预处理技术
CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...
- Activiti 5.16 用户手册
http://www.mossle.com/docs/activiti/index.html#bpmnNoneStartEvent Activiti 5.16 用户手册
- python开发之Pandas
正确的对DataFrame reverse运算 data.reindex(index=data.index[::-]) or simply: data.iloc[::-] will reverse y ...
- webpack里面__dirname意思
- [BZOJ 1412][ZJOI 2009] 狼和羊的故事
题目大意 有一个 (n times m) 的网格,每一个格子上是羊.狼.空地中的一种,羊和狼可以走上空地.现要在格子边上建立围栏,求把狼羊分离的最少围栏数. (1 leqslant n, ; m le ...