效果图

<!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. Ubuntu 更新国内镜像源失败

    Ubuntu 更新国内镜像源失败 首先打开系统原来的/etc/apt/sources.list 查看,原来的仓库地址是 https 还是 http 如果是http那么说明本机的 CA 证书有问题,运行 ...

  2. xxd - 以十六进制形式表示

    总览 (SYNOPSIS) xxd -h[elp] xxd [options] [infile [outfile]] xxd -r[evert] [options] [infile [outfile] ...

  3. 读书笔记二、ndarray的数据类型

    dtype(数据类型)是一个特殊的对象,它含有ndarray将一块内存解释为特定数据类型所需的信息: import numpy as np arr1=np.array([1,2,3],dtype=np ...

  4. react css拓展 使用less

    react 之中使用less 其实质只需要看一下resct 使用css的配置项,就能明白个大概了  第一步   还是下载 npm i  less less-loader -save 下载less 和 ...

  5. StringUtils工具类常用api <转>

    该工具类是用于操作Java.lang.String类的. StringUtils类与String类的区别在于:此类是null安全的,即如果输入参数String为null,则不会抛出NullPointe ...

  6. NX二次开发-UFUN旋转视图UF_VIEW_rotate_view

    NX11+VS2013 #include <uf.h> #include <uf_view.h> #include <uf_obj.h> #include < ...

  7. vue-cli整合axios的几种方法

    Vue这个框架现在在单页面应用方面非常受人欢迎. 基于vue-cli创建的项目怎么样才能更好地处理网络请求? 首选的应该就是axios了 这次给刚接触vue的新手介绍一下axios在vue中如何使用 ...

  8. csp-s模拟测试97

    csp-s模拟测试97 猿型毕露.水题一眼秒,火题切不动,还是太菜了. $T1$看了一会儿感觉$woc$期望题$T1??$假的吧??. $T2$秒. $T3$什么玩意儿. 40 01:24:46 00 ...

  9. C++输入cin详解

    输入原理: 程序的输入都建有一个缓冲区,即输入缓冲区.一次输入过程是这样的,当一次键盘输入结束时会将输入的数据存入输入缓冲区,而cin函数直接从输入缓冲区中取数据.正因为cin函数是直接从缓冲区取数据 ...

  10. jquery click事件失效

    除了最基本的语法错误,还可能是因为,元素根本点击不到. z-index:99;