标签：ack rip fill utf-8 form ntb html ima oct
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>svg 圆形进度条</title> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"> </head> <body> <svg class="alert-circle" width="120" height="150"> <defs> <lineargradient id="linear" x1="100%" y1="0%" x2="0%" y2="0%"> <stop offset="0%" stop-color="#fdde73"></stop> <stop offset="100%" stop-color="#ff862c"></stop> </lineargradient> </defs> <g> <circle cx="60" cy="56" r="31" fill="none" stroke="rgba(0,0,0,0.1)" stroke-width="6"></circle> </g> <g transform="rotate(-90 60 56)"> <circle cx="60" cy="56" r="32" transition="stroke-dashoffset .2s linear" stroke-dasharray="201,201" fill="none" stroke="url(#linear)" stroke-width="7" id="js-sec-circle"></circle> </g> </svg> </body> <script> setProgress(-76); function setProgress(num, r = 32) { var maxValue = 2 * Math.PI * r; document.getElementById(‘js-sec-circle‘).setAttribute(‘stroke-dashoffset‘, (maxValue * num / 100) - maxValue); } </script> </html>
效果
标签：ack rip fill utf-8 form ntb html ima oct
原文地址：https://www.cnblogs.com/zhenga/p/14025060.html
