How To Use Html SVG Tag, CSS To Implement Element Loading Animation ·

This article will tell you how to use SVG, CSS to implement the element loading animation on a Html web page.

Table of Contents

1. Use Html SVG, CSS To Implement Element Loading Animation Example.

The html file name is svg_element_loading_animation_example.html.

Below is the html file’s source code.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Use SVG, CSS To Impelment Element Loading Example</title>
<style>
/* define the svg box css style.*/
.box {
    height: 200px;
    width: 200px;
    background: white;
}
/* define the svg box and circle css style.*/
.box .circle {
    stroke-width: 2;
    stroke: #409eff;
    stroke-linecap: round;
}


/* rotate animation */
@keyframes rotate {
    to {
        transform: rotate(1turn)
    }
}
/* arc animation */
/* 125 is the circumference of the circle */
@keyframes circle {
    0% {
 /* state 1: point */
        stroke-dasharray: 1 125;
        stroke-dashoffset: 0;
    }
    50% {
 /* state 2: circle */
        stroke-dasharray: 120, 125;
        stroke-dashoffset: 0;
    }
    to {
 /* state 3: point（shrink in the direction of rotation） */
        stroke-dasharray: 120 125;
        stroke-dashoffset: -125px;
    }
}

/* define the css box class animation */
.box {
  /* ...rotate animation */
  animation: rotate 2s linear infinite;
}

/* define the css circle class animation */
.circle {
  /* ...circle animation */
  animation: circle 2s infinite;
}


</style>
</head>
<body>

<!-- Use svg tag to define a box area.  -->
<svg viewBox="25 25 50 50" class="box">
    <!-- draw a svg circle -->
    <circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>


</body>
</html>

How To Use Html SVG Tag, CSS To Implement Element Loading Animation

1. Use Html SVG, CSS To Implement Element Loading Animation Example.

2. The Demo Video Of The Element Loading Example.

Leave a Comment Cancel Reply