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快速实现环形渐变进度条
前言进度条相信我们大家都不陌生,往往我们很多时候需要使用到圆形进度条.这篇文章给大家分享了利用ios如何快速实现环形进度条,下面来一起看看. 一:先制作一个不带颜色渐变的进度条自定义一个cycle ...
css3做渐变进度条
布局: <body><section class="container"><div class="loading-bar"> ...
大屏可视化数据面板分格渐变进度条、数字翻牌器及其刷新动效实现
数据可视化大屏是当前可视化领域的一项热门应用,通常可以分为信息展示类.数据分析类及监控预警类.这类应用的视觉设计通常效果炫酷,动效丰富,有时候一些页面布局和动画实现会对前端人员有一定的挑战性,在这里分 ...
echarts渐变进度条
echarts渐变进度条展示情况如下图相关代码 var data = ['数据一','数据二',"数据三","数据四","数据五",&q ...
创建自绘进度条，并在进度条上显示当前进度的百分比
平台:VS2005: 资料参考:来源于网络: 内容介绍:创建自绘进度条,并在进度条上显示当前进度的百分比. 第一步:创建基于对话框的工程,在对话框中放置一个进度条控件, 把进度条控件的属性Smooth ...
Android开发之绘制自定义进度条 | 渐变进度条 | 斜角进度条的方法
老套路先上图先看上面的斜角进度条的实现方法: package cn.yhsh.appwidget;import android.content.Context; import android.gra ...
在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
Android环形颜色渐变进度条
我的视频课程:<FFmpeg打造Android万能音频播放器> 距离上次写博客又过了许久的了,懒起来还真是莫法,废话就不说多了,哈哈.今天要讲的就是一种常见的"环形颜色渐变的圆环 ...
matlab画图环形颜色渐变,Core Animation实战之环形颜色渐变进度条
小弟才疏学浅,第一次写简书文章,内容难免有错误或者不妥,欢迎大家来指点江山... 先来看一下最终的效果: 特点:圆环是顺时针旋转,旋转的过程中,始终保持圆环的开始端颜色最浅(白色),圆环的结尾是最深( ...

svg和css3创建环形渐变进度条

svg和css3创建环形渐变进度条相关推荐

最新文章

热门文章