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.

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

  1. The html file name is svg_element_loading_animation_example.html.
  2. 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>

2. The Demo Video Of The Element Loading Example.

svg css element loading example
svg css element loading example
 

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Clicky