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来绘制出来的,网上也有相似的,可是代码那是相 ...
随机推荐
- Cobbler_自动装系统
Cobbler —自动装系统的操作步骤 Cobbler是一款自动化操作系统安装的实现,与PXE安装系统的区别就是可以同时部署多个版本的系统,而PXE只能选择一种系统. Cobbler 的安装 # 在一 ...
- 十一、linux-mysql的多种日志和引擎文件实战
一.多种日志 mysql生成或者相关联的日志文件种类繁多,本节重点关注与mysql数据库服务相关的几类日志文件. 错误日志(error log) :记录mysql服务进程mysqld在启动/关闭或者 ...
- ionic 创建服务命令
创建Util工具库 ionic g provider Util
- day18-5个内置方法
# 1. __str__方法: 必须return class Goods: def __str__(self): return 'apple' g = Goods() print(g) #apple, ...
- django框架进阶-分页-长期维护
################## 分页 ####################### 分页, django有自己内置的分页,但是功能不是很强大,所以自己写一个分页, web页面数据非常 ...
- SpringBoot系列——WebMvcConfigurer介绍
在上篇文章中,我们遇到了接口WebMvcConfigurer.今天就来大概看一下里面的方法都有什么吧. 为什么要使用WebMvcConfigurer? WebMvcConfigurer是一个接口,提供 ...
- Rx系列---响应式编程
Rx是ReactiveX的简称,翻译过来就是响应式编程 首先要先理清这么一个问题:Rxjava和我们平时写的程序有什么不同.相信稍微对Rxjava有点认知的朋友都会深深感受到用这种方式写的程序和我们一 ...
- linux系统--C语言程序开发的基本步骤（包含gcc的基本步骤）
1.使用vi或者vim编写程序文件 2.使用gcc把所有的源文件翻译成计算机认识的格式(编译) 3.使用./a.out作为命令执行得到的可执行文件 gcc编译器的工作步骤: 1.处理所有的预处理指令 ...
- c socket 开发测试
c语言异常 参照他人代码写一个tcp的 socket 开发测试 异常A,在mac osx系统下编译失败,缺库转到debian下. 异常B,include引用文件顺序不对,编译大遍异常 异常C,/usr ...
- Android目录结构（详解）
Android目录结构(详解) 下面是HelloAndroid项目在eclipse中的目录层次结构: 由上图可以看出项目的根目录下共有九个文件(夹),下面就这九个文件(夹)进行详解: 1.1src文件 ...