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来绘制出来的,网上也有相似的,可是代码那是相 ...
随机推荐
- hdu2876 Connections between cities(LCA倍增)
图不一定联通,所以用并查集找各个联通块的祖先分别建图,之后就和LCA的步骤差不多了 #include<iostream> #include<cstring> #include& ...
- 九成AI企业亏损，人工智能商业落地为何这么难？
自1956年"人工智能"一词诞生于"达特茅斯会议"后,前者就始终在不断向前推进.虽然中间经历了不少低谷和寒潮,但总算挺了过来.60多年后,人工智能在当下呈现突飞 ...
- linux清除cache的方法
1 Linux下内存占用多的原因 当linux第一次读取一个文件运行时,一份放到一片内存中cache起来,另一份放入运行程序的内存中,正常运行,当程序运行完,关闭了,cache中的那一分却没有释放, ...
- 管理Exchange Online用户介绍（二）
一.Exchange Online配置邮件传递限制 1..进入“Exchange 管理中心”,依次点击 收件人->邮箱->选择需要管理的用户->编辑->邮箱功能->邮件传 ...
- SQL热备原理
- [LC] 13. Roman to Integer
Roman numerals are represented by seven different symbols: I, V, X, L, C, Dand M. Symbol Value I 1 V ...
- gitbook安装及初步使用
gitbook安装 https://www.jianshu.com/p/421cc442f06c https://blog.csdn.net/lu_embedded/article/details/8 ...
- SQL语句之查询（SELECT)
目录 SQL语句之查询(SELECT) 简单查询 限定查询 模糊查询 排序查询 多表查询 SQL语句之查询(SELECT) SQL是用于访问和处理数据库的标准计算机语言: 中文:结构化查询语言:英文全 ...
- jQuery常用方法归纳总结
转自:http://segmentfault.com/a/1190000000660257 $.grep() $.grep( array, function(elementOfArray, index ...
- mapreduce.shuffle set in yarn.nodemanager.aux-services is invalid
15/07/01 20:14:41 FATAL containermanager.AuxServices: Failed to initialize mapreduce.shuffle java.la ...