效果图

<!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. 内网端口转发[SSH]

    一.应用场景 获取到目标边界机器linux服务器一台,想继而向内网其他机器渗透,获取到一台webshell发现处于内网当中且不通外网.可以通过linux ssh隧道对目标内网机器进行访问. 二.利用手 ...

  2. 在windows server 2012中安装完oracle 11 client如何使用

    1.首先要添加监听配置,这样才可以没有报错的连接上服务器,至于如何添加,请自行搜索. 2.打开SQL  Plus连接oracle server端,这里因为是小白,看到命令行界面上来就需要输入用户名密码 ...

  3. windows下安装jenkins初级（2）

    这里是基于gitlab拉取代码     gitlab暂时先不多介绍     我们需要把git和gitlab连接起来方便拉取代码     所以需要git的ssh公匙和私匙     首先在   https ...

  4. php漂亮的分页类

    <?php    /*    * PHP分页类    * @package Page    * @Created 2013-03-27    * @Modify  2013-03-27    * ...

  5. Can't finish GitHub sharing process Successfully created project 'springcloud-parent' on GitHub,

    解决Can't finish GitHub sharing process Successfully created project '' on GitHub, but initial push fa ...

  6. Java——面向对象的特征二：继承性

    2.1面向对象的特征二:继承性 ①引入类继承最基本的作用是:代码重用. ②语法 [修饰符列表] class 子类名 extends 父类名{ 类体; } ③子类继承父类以后,父类中声明的属性.方法,子 ...

  7. 高危预警|RDP漏洞或引发大规模蠕虫爆发，用户可用阿里云免费检测服务自检，建议尽快修复

    2019年9月6日,阿里云应急响应中心监测到Metasploit-framework官方在GitHub空间公开了针对Windows远程桌面服务远程命令执行漏洞(CVE-2019-0708)的利用代码. ...

  8. thinkphp 静态缓存

    要使用静态缓存功能,需要开启HTML_CACHE_ON参数,并且使用HTML_CACHE_RULES配置参数设置静态缓存规则文件 . 大理石构件厂家 虽然也可以在应用配置文件中定义静态缓存规则,但是建 ...

  9. 笔试题-求小于等于N的数中有多少组素勾股数

    题目描述: 一组勾股数满足:a2+b2=c2: 素勾股数:a,b,c彼此互质. 输入正整数N: 输出小于等于N的数中有多少组勾股数. 例: 输入:10 输出:1 思路:我是直接暴力破解的…… 首先找出 ...

  10. i++ 和 ++i 的区别

    先说运算规则吧. i++ 是先赋值后自增:++i 是先自增后赋值. 以下是代码示例: int a=0; int b=0; int i=0; a=i++; System.out.println(&quo ...