html渐变色环形进度条,svg和css3如何实现环形渐变进度条

svg和css3如何实现环形渐变进度条

发布时间：2020-10-19 14:24:24

来源：亿速云

阅读：88

作者：小新

这篇文章主要介绍了svg和css3如何实现环形渐变进度条，具有一定借鉴价值，需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。

代码如下：

Title

%

window.οnlοad=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();

}

*{

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);

}

}

感谢你能够认真阅读完这篇文章，希望小编分享svg和css3如何实现环形渐变进度条内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!