效果图

<!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. 转： Meshlab简介

    本文翻译自Meshlab主页:http://www.meshlab.net/ MeshLab是用于处理和编辑3D三角形网格的开源系统.它提供了一组用于编辑,清理,修复,检查,渲染,纹理和转换网格的工具 ...

  2. python 对象的删除

  3. List之取不同元素

    1.工具-->NuGet包管理器-->管理解决方案的NuGet包程序包 2.添加System.Linq包 3.引用 using System.linq List<int> li ...

  4. leetcode-685-冗余连接②

    题目描述: 参考后提交:并查集: class Solution: def findRedundantDirectedConnection(self, edges: List[List[int]]) - ...

  5. HTML——列表标签

    什么是列表? 把…制成表,以表显示. 容器里面装载着文字或图表的一种形式,叫列表. 列表最大的特点就是 整齐 .整洁. 有序. 无序列表 ul (重点) 无序列表的各个列表项之间没有顺序级别之分,是并 ...

  6. 【网络】IP地址，子网掩码，网段表示法，默认网关，DNS服务器详解

    楔子: 以Windows系统中IP地址设置界面为参考(如图1), IP地址, 子网掩码, 默认网关 和 DNS服务器, 这些都是什么意思呢? 学习IP地址的相关知识时还会遇到网络地址,广播地址,子网等 ...

  7. 《DNS攻击防范科普系列1》—你的DNS服务器真的安全么？

    DNS服务器,即域名服务器,它作为域名和IP地址之间的桥梁,在互联网访问中,起到至关重要的作用.每一个互联网上的域名,背后都至少有一个对应的DNS.对于一个企业来说,如果你的DNS服务器因为攻击而无法 ...

  8. NOIp2018集训test-9-23

    这个NOI模拟题怕是比你们的NOIp模拟题要简单哦.. 友好的生物 应该是一道简单题,但是机房只有辉神一个人想到正解似乎. 被我kd-tree水过去了(这不是kd-tree的裸题吗???(不是)) / ...

  9. 暑假集训test-8-29

    今天瓜成一坨了. 瓜的说不出话来. 直接退役算了我. T1 傻逼题,但是我傻逼地敲了一个线段树合并,然后把空间炸了,只剩20分, 直接dfs维护子树大小,子树中最大最小值即可统计答案. //Achen ...

  10. 8.RabbitMQ 消息传递Java对象

    通过消息服务器传递Java对象,Java类必须实现序列化接口,可以把Java对象转化为字节数组,从消费者或生产者传递到另外一个JVM中,一定需要两个JVM共享这个类,比如是UserInfo类.   1 ...