<!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>
时间： 2024-12-24 07:07:20