Recently, there are a lot of development needs in the project, and there are no difficulties, so I did not sort out the relevant problems and share them with everyone. When I saw the loading effect of the project handwriting, I felt very funny (it was not developed by me), and I thought that I could not write some common Loadig effects. This article is mainly to share some ideas and ideas in the process of writing, but also to make a record of what they have mastered.Copy the code

The first one: round loading

First we draw a circle in SVG

html:
<svg height="50" width="50" viewBox="0 0 50 to 50." ">
    <circle cx="25" cy="25" r="20"/>
</svg>
Copy the code
Style: circle {fill: none; // Inner circle filling stroke: #9bf99b; // circle color stroke-width: 2; // circle width}Copy the code

How to make the circle from short to long and then disappear? In this case, do we need to achieve the effect of non-complete circle first

Dashed stroke-dasharray and stroke-dashoffset are used

Determine the circumference of the circle 2πr=2×3.14×20 is approximately equal to 125.6

Style: circle {fill: none; // Inner circle filling stroke: #9bf99b; // circle color stroke-width: 2; // Circle width stroke-dasharray: 63px; // Dashed line length 63px, spacing 63px, repeat}Copy the code

Style: less 10px circle {fill: none; // Inner circle filling stroke: #9bf99b; // circle color stroke-width: 2; // Circle width stroke-dasharray: 63px 10px; // Dotted lines 63px long, 10px spacing, repeat}Copy the code

Style: circle {fill: none; // Inner circle filling stroke: #9bf99b; // circle color stroke-width: 2; // Circle width stroke-dasharray: 126px; // Dotted lines 126px long, spacing 126px, repeat}Copy the code

Results 1

Start by drawing a circle. Let the circle grow from short to long and then fade away.

  • Stroke-dasharray changes the circumference of the circle from 1px to 100px
  • Stroke-dashoffset offsets the circle from 0px-15px-200px visible length

Results 2

Next, give the circle an effect of rotation

  • Transform has 2D or 3D transformations, such as zooming in and out, rotating and tilting

The code for the final implementation:

html:
<div class="circle-loading-svg">
  <svg height="50" width="50" viewBox="0 0 50 to 50." ">
    <circle id="circle" cx="25" cy="25" r="20"/>
  </svg>
</div>
Copy the code
Style: #circle{animation: loading-circle 1.4s ease-in-out infinite; /* fill the circle */ fill: none; /* circle color */ stroke: #9bf99b; /* circle width */ stroke-width: 2; } @keyframes loading-circle { 0% { stroke-dasharray: 1px 200px; stroke-dashoffset: 0; } 30% { stroke-dasharray: 100px 200px; stroke-dashoffset: -15px; stroke: green; } 100% { stroke-dasharray: 100px 200px; stroke-dashoffset: -120px; }}. Rotation-loading-svg {animation: loading-rotate 1.4s linear infinite; display: flex; align-items: center; justify-content: center; } @keyframes loading-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(1turn); }}Copy the code

Second: line loading

Determine how many lines you load, and I used 8 here

html:
<svg height="80" width="80" viewBox="0 0 80 80">
    <line id="lineRx" x1="40" y1="40" x2="75" y2="40"/>
    <line id="lineFx" x1="40" y1="40" x2="65" y2="65"/>
    <line id="lineSx" x1="40" y1="40" x2="40" y2="75"/>
    <line id="lineTx" x1="40" y1="40" x2="15" y2="65"/>
    <line id="lineR" x1="5" y1="40" x2="40" y2="40"/>
    <line id="lineF" x1="15" y1="15" x2="40" y2="40"/>
    <line id="lineS" x1="40" y1="5" x2="40" y2="40"/>
    <line id="lineT" x1="65" y1="15" x2="40" y2="40"/>
    <circle cx="40" cy="40" r="15" fill="#ffffff"/>
</svg>
Copy the code
Style: line {stroke: #9bf99b; stroke-width: 2; }Copy the code

According to the loading style we usually see, change the color of each line regularly to achieve the loading effect. So we’re going to animate it, and each line is going to change color, and the first line is going to change color, and so on.

html:
<svg height="80" width="80" viewBox="0 0 80 80">
    <line id="lineRx" x1="40" y1="40" x2="75" y2="40"/>
    <line id="lineFx" x1="40" y1="40" x2="65" y2="65"/>
    <line id="lineSx" x1="40" y1="40" x2="40" y2="75"/>
    <line id="lineTx" x1="40" y1="40" x2="15" y2="65"/>
    <line id="lineR" x1="5" y1="40" x2="40" y2="40"/>
    <line id="lineF" x1="15" y1="15" x2="40" y2="40"/>
    <line id="lineS" x1="40" y1="5" x2="40" y2="40"/>
    <line id="lineT" x1="65" y1="15" x2="40" y2="40"/>
    <circle cx="40" cy="40" r="15" fill="#ffffff"/>
</svg>
Copy the code
Style: line {animation: loading-line 0.8s linear infinite; stroke: #9bf99b; stroke-width: 2; } @keyframes loading-line { 0% { stroke: green; opacity: 1; } 100% { opacity: 0; } } #lineRx { animation-delay: 0s; } #lineFx {animation-delay: 0.11s; } #lineSx {animation-delay: 0.22s; } #lineTx {animation-delay: 0.33s; } #lineR {animation-delay: 0.44s; } #lineF {animation-delay: 0.55s; } #lineS {animation-delay: 0.66s; } #lineT {animation-delay: 0.77s; }Copy the code

Third: water drop loading

Draw a few drops of water

html:
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cF" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cS" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cT" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cX" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cY" cx="10" cy="10" r="5"/>
</svg>
Copy the code
Style:.circle {fill: #9bf99b; }Copy the code

There is a zoom in and out effect, and there is a time delay between the previous droplet and the next droplet

html:
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cF" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cS" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cT" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cX" cx="10" cy="10" r="5"/>
</svg>
<svg height="20" width="20" viewBox="0 0 20 20">
    <circle class="circle cY" cx="10" cy="10" r="5"/>
</svg>
Copy the code
Style:. Circle {animation: loading-big 0.8s linear infinite; fill: #9bf99b; }. CF {animation-delay: 0.11s; }. CS {animation-delay: 0.22s; }. CT {animation-delay: 0.33s; }. CX {animation-delay: 0.44s; }. CY {animation-delay: 0.55s; } @keyframes loading-big { 0% { fill: green; r: 10px; } 100% { fill: #9bf99b; r: 2px; }}Copy the code

Fourth: rectangle loading

Let me draw some rectangles

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>
Copy the code
Style: rect {fill: #9bf99b; }Copy the code

We need to reduce the height of the rectangle at the beginning and end, and increase the height of the rectangle in the middle without changing the width.

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>
Copy the code
Style: rect {animation: loading-rect 0.8s linear infinite; fill: #9bf99b; }. CF {animation-delay: 0.11s; }. CS {animation-delay: 0.22s; }. CT {animation-delay: 0.33s; }. CX {animation-delay: 0.44s; }. CY {animation-delay: 0.55s; } @keyframes loading-rect { 0%,100% { fill: #9bf99b; height: 10px; } 50%{ fill: green; height: 60px; }}Copy the code

But this is not what we want, we want the rectangle to zoom in and out up and down, how to change it? If you want to zoom in on the rectangle, move the rectangle up a little bit, that’s what it feels like

  • y: -15px;

html:
<svg width="120" height="200" viewBox="0 0 70 200">
    <rect class="cF" x="0" y="20" width="10" height="20"/>
    <rect class="cS" x="20" y="20" width="10" height="20"/>
    <rect class="cT" x="40" y="20" width="10" height="20"/>
    <rect class="cX" x="60" y="20" width="10" height="20"/>
    <rect class="cY" x="80" y="20" width="10" height="20"/>
</svg>
Copy the code
Style: rect {animation: loading-rect 0.8s linear infinite; fill: #9bf99b; }. CF {animation-delay: 0.11s; }. CS {animation-delay: 0.22s; }. CT {animation-delay: 0.33s; }. CX {animation-delay: 0.44s; }. CY {animation-delay: 0.55s; } @keyframes loading-rect { 0%,100% { fill: #9bf99b; height: 10px; } 50%{ fill: green; height: 60px; y: -15px; }}Copy the code

thinking

  1. In the process of actual development, there will be a variety of loading effects that the customer wants, what we can do is to split the animation, how to make the static moving.
  2. When to animate with pure CSS? When was the animation implemented in JS?
  3. Leave a comment and make fun animations together