Sample Code for SVG to implement the countdown Effect of colorful rings and svg sample code

Sample Code for SVG to implement the countdown Effect of colorful rings and svg sample code

As we often see in the circle countdown, there are also many implementation methods. However, this article introduces a new implementation method, using SVG to implement the countdown function.

This article mainly uses the stroke-dasharray and stroke-dashoffset features of SVG. Is the countdown running effect:

SVG countdown case

The following describes the implementation code. The css implementation code is as follows:

svg {    transform: rotate(-0.05deg);}circle {    transition: stroke-dasharray .2s;}.time-count-x {    line-height: 1.5;    position: relative;}.time-second {    position: absolute;    top: 50%; left: 0; right: 0;    margin-top: -.75em;    text-align: center;    font-size: 100px;}

The related html code is as follows:

<div id="timeCountX" class="time-count-x">    <svg width="440" height="440" viewBox="0 0 440 440" class="center">        <defs>            <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient1">                <stop offset="0%" stop-color="#e52c5c"></stop>                <stop offset="100%" stop-color="#ab5aea"></stop>            </linearGradient>           <linearGradient x1="1" y1="0" x2="0" y2="0" id="gradient2">                <stop offset="0%" stop-color="#4352f3"></stop>                <stop offset="100%" stop-color="#ab5aea"></stop>            </linearGradient>        </defs>        <g transform="matrix(0,-1,1,0,0,440)">            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="#f0f1f5" fill="none" stroke-dasharray="1069 1069"></circle>            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient1')" fill="none" stroke-dasharray="1069 1069"></circle>            <circle cx="220" cy="220" r="170" stroke-width="50" stroke="url('#gradient2')" fill="none" stroke-dasharray="534.5 1069"></circle>        </g>    </svg>    <span id="timeSecond" class="time-second"></span></div>

Finally, the JavaScript code is as follows:

Var eleCircles = document. querySelectorAll ("# timeCountX circle"); var eleTimeSec = document. getElementById ("timeSecond"); var perimeter = Math. PI * 2*170; var circleInit = function () {if (eleCircles [1]) {eleCircles [1]. setAttribute ("stroke-dasharray", "1069 1069")} if (eleCircles [2]) {eleCircles [2]. setAttribute ("stroke-dasharray", perimeter/2 + "1069")} eleTimeSec. innerHTML = ""}; var timerTimeCount = null; var fnTimeCou Nt = function (B) {if (timerTimeCount) {return} var B = B | 10; var a = function () {var c = B/10; if (eleCircles [1]) {eleCircles [1]. setAttribute ("stroke-dasharray", perimeter * c + "1069")} if (eleCircles [2] & B <= 5) {eleCircles [2]. setAttribute ("stroke-dasharray", perimeter * c + "1069")} if (eleTimeSec) {eleTimeSec. innerHTML = B} B --; if (B <0) {clearInterval (timerTimeCount); timerTimeCount = null; alert ("Time! "); CircleInit () }}; a (); timerTimeCount = setInterval (a, 1000)}; fnTimeCount ();

There are very few codes in the case. Some friends who like this can save the code to html and run it to experience the actual effect.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.