svg和css3实现环形渐变进度条的代码示例

来源：动视网责编：小采时间：2020-11-27 15:03:51

svg和css3实现环形渐变进度条的代码示例

svg和css3实现环形渐变进度条的代码示例:本篇文章给大家带来的内容是关于svg和css3实现环形渐变进度条的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。代码如下：<!DOCT

推荐度：

点击下载本文 文档为doc格式

导读svg和css3实现环形渐变进度条的代码示例:本篇文章给大家带来的内容是关于svg和css3实现环形渐变进度条的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在负责的项目中，有一个环形渐变读取进度的效果的需求，于是在网上查阅相关资料整理一下。代码如下：<!DOCT

本篇文章给大家带来的内容是关于svg和css3实现环形渐变进度条的代码示例，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

代码如下：

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
 <div>
 <svg width="340" height="340" xmlns="http://www.w3.org/2000/svg">
 <circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />
 <circle r="150" cy="170" cx="170" stroke-width="35" stroke="url(#linearGradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
 <circle 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>
 <div>
 <span></span><span>%</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">
 *{
 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>

svg和css3实现环形渐变进度条的代码示例

推荐度：

点击下载本文 文档为doc格式

标签：实现 css 渐变

热门焦点

svg和css3实现环形渐变进度条的代码示例

svg和css3实现环形渐变进度条的代码示例

svg和css3实现环形渐变进度条的代码示例

最新推荐

猜你喜欢

热门推荐