svg實現漸變進度圓環
阿新 • • 發佈：2018-12-12
效果圖
<!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