zoukankan      html  css  js  c++  java
  • svg实现渐变进度圆环

    效果图

    <!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;
             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;
             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

  • 相关阅读:
    数据库设计的几个建议
    CAS单点登录和spring securtiy集成
    冒烟测试
    匠人精神
    iOS UIButton 设置图片文字垂直排列
    PHP字符串处理函数
    php 数组的常用函数
    Linux中常用操作命令
    yii2.0高级框架配置时打开init.bat秒退的解决方法 (两种方法)
    前端优化网站性能的14条规则
  • 原文地址:https://www.cnblogs.com/jerrypig/p/10108979.html
Copyright © 2011-2022 走看看