效果图

<!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. 异步action和redux-thunk理解

    异步action一般指的就是异步action创建函数 action创建函数分为同步action创建函数和异步action创建函数 同步action创建函数(最常见的): function reques ...

  2. ubuntu查看时间同步服务器的匹配源

    当服务器时间与设定好的同步时间源的时间有差异的时候,一般都需要先查看本机的时间同步服务功能是否在正常的运转,以及同步的时间源是哪里,在这里为大家提供一个检查时间用的命令. ubuntu版本 servi ...

  3. vagrant ssh try

    Vagrantfile add Vagrant.configure("2") do |config| config.vm.network "private_network ...

  4. Hbase和Hive在大数据架构中处在不同位置

    先放结论:Hbase和Hive在大数据架构中处在不同位置,Hbase主要解决实时数据查询问题,Hive主要解决数据处理和计算问题,一般是配合使用.一.区别:Hbase: Hadoop database ...

  5. centos6|centos7防火墙区别 | 网络配置区别

    CentOS 6 Linux防火墙 service iptables status (功能描述:查看防火墙状态) chkconfig iptables –list (功能描述:查看防火墙开机启动状态) ...

  6. NX二次开发-获取工程图尺寸的值UF_DRF_ask_dim_info

    UF_initialize(); //遍历所有尺寸 ; tag_t DimTag = NULL_TAG; UF_OBJ_cycle_objs_in_part1(UF_PART_ask_display_ ...

  7. Core Data could not fulfill a fault

    做项目的时候在iOS4系统遇到过这样一个crash,console显示的错误信息是"Core Data could not fulfill a fault". 字面意思是什么?&q ...

  8. maven-version

    <java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.bu ...

  9. web开发者性能优化工具（一）

    web开发者性能优化工具 1   数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的 ...

  10. SecureRandom的正确使用

    目录 1. 什么是安全的随机数? 2. 怎么得到安全的随机数 3. SecureRandom最佳实践 3.1 基本用法 3.2 关于种子的设置 3.3 熵源不足时阻塞问题 4. 小结 1. 什么是安全 ...