效果图

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>svg 圆形进度条</title>

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <style>

    body {

        margin: 0;

        padding: 0;

        font-family: Arial, "微软雅黑", "宋体", sans-serif;

        background: #e6eaeb;;

    }

    .alert-box {

        position: relative;

        display: block;

        width: 286px;

        margin: 96px auto 0;

        padding: 180px 85px 22px;

        text-align: center;

        color: #fff;

        border-radius: 10px 10px 0 0;

        background: #fff;

        box-shadow: 5px 9px 17px rgba(102, 102, 102, .75);

    }

    .alert-box p {

        margin: 0;

    }

    .alert-circle {

        position: absolute;

        top: -50px;

        left: 130px;

    }

    .alert-sec-circle {

        transition: stroke-dashoffset .2s linear;

        /* stroke-dashoffset: -440; */

        stroke-dasharray: 735;

    }

    .alert-sec-unit {

        font-size: 34px;

    }

    #circle-txt {

        position: absolute!important;

        bottom: 137px;

        left: 172px;

        width: 102px;

        font-size: 40px;

        text-align: center;

    }

    </style>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">

</head>

<body>

    <div id="js-alert-box" class="alert-box">

        <svg class="alert-circle" width="180" height="180">

            <defs>

                <lineargradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">

                    <stop offset="0%" stop-color="#F2412A"></stop>

                    <stop offset="100%" stop-color="#FFD000"></stop>

                </lineargradient>

            </defs>

            <circle cx="90" cy="90" r="78" fill="#3BA7F3" stroke="url(#linear)" stroke-width="8"></circle>

            <circle cx="90" cy="90" id="js-sec-circle" class="alert-sec-circle" r="78" fill="transparent" stroke="#F4F1F1" stroke-width="9" transform="rotate(-90 90 90)"></circle>

        </svg>

        <div id="circle-txt">

            100%

        </div>

    </div>

</body>

<script>

setProgress(70);

function setProgress(num, r = 78) {

    document.getElementById('circle-txt').innerHTML = num + '%';

    document.getElementById('js-sec-circle').setAttribute('stroke-dashoffset', -2 * Math.PI * r * num / 100);

}

</script>

</html>

致谢参考

敬请参考 https://github.com/jasonChen2014/svgProgessBar/blob/master/index.html

svg实现渐变进度圆环的更多相关文章

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

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

  2. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

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

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

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

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

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

    在负责的项目中,有一个环形渐变读取进度的效果的需求,于是在网上查阅相关资料整理一下.代码如下: <!DOCTYPE html> <html lang="en"&g ...

  6. canvas锥形渐变进度条

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

  7. SVG:linearGradient渐变在直线上失效的问题解决方案

    SVG开发里有个较为少见的问题. 对x1=x2或者y1=y2的直线(line以及path),比如: <path d="M200,10 200,100" stroke=&quo ...

  8. iOS 渐变进度条

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

  9. iOS开发——自定义进度圆环

    1.在DrawCircle.h文件中 提供了接口,在使用的时候,可以设定圆心.半径.角度.圆环的宽度.圆环的背景底色.圆环的进度条颜色,当然后面三个有自定义的值. // //  DrawCircle. ...

随机推荐

  1. uniq - 删除排序文件中的重复行

    总览 (SYNOPSIS) ../src/uniq [OPTION]... [INPUT [OUTPUT]] 描述 (DESCRIPTION) 从 INPUT (或 标准输入) 数据 中 忽略 (但是 ...

  2. 在当前对象中可以使用this关键字指代当前对象

    在当前对象中可以使用this关键字指代当前对象

  3. html中没有不能随意嵌套的标签

    在HTML里有几个元素是比较特别的:<ul>.<ol>.<dl>.<table>,它们的子一层必须是指定元素,<ul>.<ol> ...

  4. magento中的getBaseUrl函数

    (转)本文地址:http://www.popo4j.com/magento/mage_getbaseurl.html 在magento中如果要获取JS,media,skin目录,我们可以使用magen ...

  5. poi之Excel（在线生成）下载

    Apache POI是Apache软件基金会的开放源码函式库,POI提供API给Java程序对Microsoft Office格式档案读和写的功能. poi之Excel下载 @RequestMappi ...

  6. 思维题+贪心——牛客多校第一场C

    /* 给定一组n维向量 A=(a1/m,a2/m,a3/m ... an/m), 求另一个n维向量 P=(p1,p2,p3...pn),满足sum{pi}=1,使得ans=sum{(ai/m-pi)^ ...

  7. JS对象的可枚举属性和不可枚举属性

    昨天在写文章(转载)的时候发现了有些对象的方法是分可枚举性和不可枚举性的.简单的查了一下资料,今天来捋一捋啥是对象的可枚举啥是不可枚举. 可枚举性: 对象的每一个属性都有一个描述对象,用来描述和控制该 ...

  8. delphi基础篇之单元文件

    Delphi单元文件 unit MainFrm; {库单元文件头} interface        {接口部分由Interface开始implementation结束.声明引用的单元,常量,数据类型 ...

  9. Interesting HDU - 5785 回文树

    题意: 找出所有[i,j]为回文串[j+1,k]也为回文串的i*k乘积之和. 题解: 设sum1[i] 为正着插入,到 i 的所有回文串的起始位置的前缀和,sum2[i] 表示反正插入的前缀和 ans ...

  10. neo4j采坑记

    1.安装后启动不起来,解决方案: https://stackoverflow.com/questions/38607283/failed-to-start-neo4j-service  2.一直启动不 ...