<!doctype html> <html lang="zh" class="no-js"> <head> <meta charset="UTF-8"> <style> .cd-stroke { fill: none; stroke-width: 20; stroke-miterlimit: 10; } .cd-stroke-color-1 { stroke: #D7DCE0; stroke-width: 30; } .cd-stroke-color-2 { stroke: #c3c3c3; } .cd-stroke-color-3 { stroke: #4DC36E; } #cd-circle-filled { opacity: 1; -webkit-transition: stroke-dashoffset .5s 0s; -moz-transition: stroke-dashoffset .5s 0s; transition: stroke-dashoffset .5s 0s; } </style> </head> <body> <div class="cd-svg-container"> <svg id="cd-animated-svg" version="1.1" x="0px" y="0px" width="240px" height="240px" viewBox="0 0 240 240" style="enable-background:new 0 0 240 240;" xml:space="preserve"> <g id="cd-loading"> <g id="cd-circle"> <circle id="cd-circle" class="cd-stroke cd-stroke-color-1" cx="120" cy="120" r="79.5"/> <circle id="cd-circle2" class="cd-stroke cd-stroke-color-2" cx="120" cy="120" r="79.5"/> <circle id="cd-circle-filled" class="cd-stroke cd-stroke-color-3" cx="120" cy="120" r="79.5" transform="rotate(-90 120 120)"/> </g> </g> </svg> </div> <script> (function () { var loadingCircle = document.querySelector("#cd-circle-filled"); var circumf = Math.PI * (loadingCircle.getAttribute('r') * 2); function render(ele) { var parentPanel = ele?ele:document.querySelector(".cd-svg-container"); var pWidth = parentPanel.outerWidth , pHeight = parent.outerHeight , r = 77.5 , cx = pWidth / 2 , cy = pHeight / 2; // var svg=document.createElement(); } /** * 初始化圆图形 */ function initLoading() { loadingCircle.style["stroke-dasharray"] = circumf + " " + circumf; loadingCircle.style["stroke-dashoffset"] = circumf; } initLoading(); function setVal(num) { if (num > 100)num = 100;// var strokeOffset = loadingCircle.style['stroke-dashoffset'].replace('px', ''); loadingCircle.style['stroke-dashoffset'] = (circumf * (100 - num) / 100) + "px"; } window["setVal"] = setVal; window.setInterval(function () { setVal(parseInt(Math.random() * 101)) }, 800); })(); </script> </body> </html>
