Pure HTML + CSS to achieve element loading effect


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


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


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

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!