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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  7. </head>
  8. <body>
  9.   <div class="donut">
  10.     <svg width="340" height="340" xmlns="http://www.w3.org/2000/svg" class="donut_svg">
  11.       <circle r="150" cy="170" cx="170" stroke-width="10" stroke="#FAFAFA" fill="none" />
  12.       <circle class="circle_bar" r="150" cy="170" cx="170" stroke-width="35" stroke="url(#linearGradient)" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
  13.       <circle class="dot" fill="#FFFFFF" fill-rule="nonzero" cx="320" cy="170" r="12"></circle>
  14.       <defs>
  15.         <linearGradient x1="0%" y1="80.9878035%" x2="96.9769965%" y2="41.7547666%" id="linearGradient">
  16.           <stop stop-color="#18A6FF" offset="0%"></stop>
  17.           <stop stop-color="#32B7FF" offset="52.7095376%"></stop>
  18.           <stop stop-color="#0094F1" offset="100%"></stop>
  19.         </linearGradient>
  20.       </defs>
  21.     </svg>
  22.     <div class="donut_copy">
  23.       <div class="donut_title">
  24.         <span class="js-donut-figure"></span><span class="donut_spic">%</span>
  25.       </div>
  26.     </div>
  27.   </div>
  28.   <script type="text/javascript">
  29.     window.onload=function () {
  30.       'use strict';
  31.       var ProgressCircle = (function () {
  32.         function ProgressCircle(percent,radius,elementClass){
  33.          this._percent = percent;  //百分比
  34.          this._radius = radius;    //圆的半径
  35.          this._elementClass = elementClass;
  36.        }
  38.        ProgressCircle.prototype.calcDashOffset = function () {
  39.          var circumference;
  40.            circumference = Math.PI * (2 * this._radius);   //计算圆圈的周长
  41.            return Math.round(circumference - this._percent / 100 * circumference);  //计算圆圈要渲染的 长度！
  42.          }
  44.         //渲染进度条
  45.         ProgressCircle.prototype.createCSS = function() {
  46.           return $("." + this._elementClass + " .circle_bar").css('stroke-dashoffset', this.calcDashOffset());
  47.         };
  48.         //读取效果
  49.         ProgressCircle.prototype.updateText = function () {
  50.           $("." + this._elementClass + " .js-donut-figure")[0].innerText = this._percent;
  51.         }
  53.         ProgressCircle.prototype.init = function() {
  54.           var _this = this;
  55.           setTimeout(function(){
  56.             _this.updateText();
  57.             return _this.createCSS();
  58.           },1000);
  59.         };
  60.         return ProgressCircle;
  61.       })();
  63.       let progress = new ProgressCircle(50, 150, 'donut');
  64.       progress.init();
  65.     }
  66.   </script>
  67.   <style type="text/css" lang="scss">
  68.   *{
  69.     padding:0;
  70.     margin:0
  71.   }
  72.   .donut{
  73.     position: relative;
  74.   }
  75.   .circle_warp{
  76.     position: relative;
  77.     top: 0;
  78.     left: 0
  79.   }
  80.   .circle_bar {
  81.     stroke-dasharray: 942.4777960769379;  //计算整个圆周的周长公式为Circumstance=2*PI*Radius  2*3.14*半径（此时是半径是150）
  82.     stroke-dashoffset: 942.4777960769379;
  83.     transition: stroke-dashoffset 1200ms cubic-bezier(.99,.01,.62,.94);
  84.   }
  85.   .donut_svg{
  86.     transform: rotate(-90deg);
  87.   }
  88.   .donut_copy{
  89.     text-align: center;
  90.     width: 340px;
  91.     height: 340px;
  92.     top: 40%;
  93.     left: 0;
  94.     position: absolute;
  95.   }
  96.   .donut_title{
  97.     opacity: 0;
  98.     font-size: 42px;
  99.     color: #171717;
  100.     margin-bottom: 2px;
  101.     animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;
  102.     transform: translateX(0);
  103.     font-weight: bold;
  104.   }
  105.   .donut_spic{
  106.     content: "%";
  107.     animation: donutTitleFadeRight 800ms 200ms cubic-bezier(.99,.01,.22,.94) forwards;
  108.     opacity: 0;
  109.     transform: translateY(-20px);
  110.   }
  111.   .donut__text p{
  112.     font-size: 16px;
  113.     color: #AAAAAA;
  114.   }
  115.   @keyframes donutTitleFadeLeft {
  116.     from {
  117.       opacity: 0;
  118.       transform: translateX(0);
  119.     }
  121.     to {
  122.       opacity: 1;
  123.       transform: translateX(10px);
  124.     }
  125.   }
  127.   @keyframes donutTitleFadeRight {
  128.     from {
  129.       opacity: 0;
  130.       transform: translateX(-30px);
  131.     }
  132.     to {
  133.       opacity: 1;
  134.       transform: translateX(0);
  135.     }
  136.   }
  137. </style>
  138. </html>

原文地址：根据原文思路修改的代码来实现的效果，有兴趣的可以看下
http://www.techbrood.com/zh/n...

svg和css3创建环形渐变进度条的更多相关文章

  1. 【iOS】环形渐变进度条实现

    之前有人在找渐变进度条的效果,闲来无事就顺手写了一个,然后画了视图层级,方便讲解. 环境信息: Mac OS X 10.10.3 Xcode 6.3.1 iOS 8.3 效果图: 源码下载地址: ht ...

  2. 基于css3的环形动态进度条（原创）

    基于css3实现的环形动态加载条,也用到了jquery.当时的想法是通过两个半圆的转动,来实现相应的效果,其实用css3的animation也可以实现这种效果.之所以用jquery是因为通过jquer ...

  3. iOS圆弧渐变进度条的实现

    由于项目需要一个环形渐变进度条显示课程,这方便网上的确有很多相关资料但是,都是比较零散的而且,大多数只是放一堆代码就算完了.这里我想详细写一篇我自己实现这个进度条的过程. 实现一个圆弧进度条主要分为三 ...

  4. 自定义控件之圆形颜色渐变进度条--SweepGradient

    前几天在群里面有人找圆形可颜色渐变进度条,其中主要的知识点是SweepGradient: mSweepGradient = new SweepGradient(240, 360, new int[] ...

  5. 详解用CSS3制作圆形滚动进度条动画效果

    主  题 今天手把手教大家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客<CSS实现进度条和订单进度条>,但是呢, ...

  6. canvas锥形渐变进度条

    从一个渐变圆角进度条浅出画一个圆 开始 这一切需要从一个(简单)的需求开始,在最开始对设计第一眼看到这张图的时候,感觉挺简单的嘛,直接用echarts饼图模拟出来一个就好了 echarts 然后上ec ...

  7. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

  8. iOS 渐变进度条

    #import <UIKit/UIKit.h> @interface JianBianView : UIView //为了增加一个表示进度条的进行,可们可以使用mask属性来屏蔽一部分 @ ...

  9. android自己定义渐变进度条

    项目中须要用到一个弧形渐变的进度条,通过android自带是不能实现的.我是没有找到实现的方法,有大神知道的能够指点.效果图是以下这种 这是通过继承VIew来绘制出来的,网上也有相似的,可是代码那是相 ...

随机推荐

  1. Python_面试题_更新中

    Python-面试题 线上操作系统 centos py2和py3的区别 每种数据类型,列举你了解的方法 3 or 9 and 8 字符串的反转 is 和 == 的区别? git流程 v = (1) / ...

  2. Qt LNK1112: 模块计算机类型“x64”与目标计算机类型“X86”冲突问题

    解决方法:1.找到选项: 2.点击构建套件kit,选择x86_amd64,之后便不会出现类似问题了

  3. python之处理json字符串

    一.如何从文件中读取json字符串 通过json模块可以处理json数据. 1.loads()方法 loads(json_object)将json字符串转换成dict类型. import json # ...

  4. gpio 的配置

    1.时钟使能 B引脚RCC时钟脉冲启动.|(或)表示只要第三个为1就行. 也可以写为RCC_APB2ENR  | = 0X0008; 2.配置GPIO的输出模式以及速度 3 . 如果是 0号引脚:GP ...

  5. BucketSort（桶排序）原理及C++代码实现

    桶排序假设输入数据服从均匀分布,平均情况下它的时间复杂度为O(n). 桶排序将输入数据的区间均匀分成若干份,每一份称作“桶”.分别对每一个桶的内容进行排序,再按桶的顺序输出则完成排序. 通常使用链表来 ...

  6. <USACO09DEC>视频游戏的麻烦Video Game Troublesの思路

    emm今天模拟赛的题.神奇地A了 #include<cstdio> #include<cstring> #include<iostream> #include< ...

  7. python面向对象类的约束和设计的统一化规范

    .封装 定义:将一些东西内容封存到一个地方,你还可以再取出, 类设置静态属性,设置一些方法 对象可以在其对象空间中封装一些属性 2.多态 定义:一个事物的多种形态 就想a可以是一个字符串,可以是一个列 ...

  8. 视觉SLAM算法框架解析(3) SVO

    版权声明:本文为博主原创文章,未经博主允许不得转载. SVO(Semi-direct Visual Odometry)[1]顾名思义是一套视觉里程计(VO)算法.相比于ORB-SLAM,它省去了回环检 ...

  9. 深入JVM内核--GC算法和种类

    GC的概念 Garbage Collection 垃圾收集 1960年 List 使用了GC Java中,GC的对象是堆空间和永久区 引用计数法 老牌垃圾回收算法 通过引用计算来回收垃圾 使用者 CO ...

  10. Alfresco的安装配置(Centos6系统中安装)

    Alfresco是一款开源的企业内容管理系统(ECMS),为企业提供了日常的文档管理.协同工作.工作记录管理.知识管理.网络内容管理.图片管理等多种功能. Alfresco是目前应用最广泛的开源企业知 ...