svg在html中自定义圆环,前端 svg 如何 开发 圆环加载

/p>

<

.progress {

width: 9.55rem;

height: 9.55rem;

position: absolute;

top: 50%;

left: 50%;

margin: -4.77rem 0 0 -4.77rem

}

.percent {

position: absolute;

top: 50%;

left: 50%;

width: 5rem;

height: 4rem;

margin: -2rem 0 0 -2.5rem

}

.percent p {

color: #EB6200;

text-align: center;

font-size: 1.3rem

}

.percent h1,

.percent h2 {

text-align: center;

line-height: 1.2rem

}

.progress svg {

width: 9.55rem;

height: 9.55rem;

}

.progress svg path {

stroke: #EB6200;

stroke-width: 4;

opacity: 1;

fill: none;

-webkit-transition: stroke-dashoffset 0.3s;

transition: stroke-dashoffset 0.3s;

-webkit-animation: dash 2s linear forwards;

}

@-webkit-keyframes dash {

to {

stroke-dashoffset: 0;

}

}

100%

style=”stroke-dasharray: 204.243713378906px; stroke-dashoffset: 204.243713378906px;”>

(function (doc, win) {

var docEl = doc.documentElement,

resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,

recalc = function () {

var clientWidth = docEl.clientWidth;

if (!clientWidth) return;

docEl.style.fontSize = (20 * (clientWidth / 320)) > 40 ? 40 + “px” : (20 * (clientWidth / 320)) + ‘px’;

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener(‘DOMContentLoaded’, recalc, false);

function percent() {

var i = document.querySelector(“.percent > p”),

time = 0,

interval = setInterval(function () {

time += 1;

i.innerHTML = time + “%”;

if (time >= 100) {

clearInterval(interval)

}

}, 20);

}

percent()

})(document, window);