Pure HTML + CSS to achieve element loading effect

Time:2021-11-15

This is the rendering of the element UI loading component. It looks cool. Let’s implement it!

analysis

The animation consists of two parts:

The blue arc extends from a point into a circle and shrinks from a circle into a point.

The parent node of the circle rotates with the circle

code
html


<svg viewBox="25 25 50 50" class="box">
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>

css
Default style


.box {
    height: 200px;
    width: 200px;
    background: wheat;
}
.box .circle {
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}

Add animation effects

/*Rotate animation*/
@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}
/*Arc animation*/
/*125 is the circumference of a circle*/
@keyframes circle {
    0% {
 /*Status 1: point*/
        stroke-dasharray: 1 125;
        stroke-dashoffset: 0;
    }
    50% {
 /*Status 2: circle*/
        stroke-dasharray: 120, 125;
        stroke-dashoffset: 0;
    }
    to {
 /*State 3: point (retracting in the direction of rotation)*/
        stroke-dasharray: 120 125;
        stroke-dashoffset: -125px;
    }
}
.box {
  /*... ibid*/
  animation: rotate 2s linear infinite;
}
.circle {
  /*... ibid*/
  animation: circle 2s infinite;
}

Finally, remove the background

 

Online code demonstrationhttps://jsbin.com/yarufoy/edit?html,css,output

This is the end of this article on the effect of pure HTML + CSS to realize element loading. For more relevant content of HTML + CSS to realize loading, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!