Loading is used in many pages to reduce user anxiety and prompt the user to wait.

Today we will use the tag SVG to create a loading effect.

Preview effect:

SVG has a lot of tags, and I used <circle>.

1. Related tag attributes

SVG:

  • XMLNS: Defines the default namespace.
  • ViewBox: The window size of this SVG image. Written like (xAxis yAxis xValue yValue), the first two represent x and y coordinates, relative to the current box (viewport) upper left corner as the origin, the last two define the size of the window.
  • Width /height: indicates the size of the drawing space. If the size of the window is smaller than any of them, the drawing will be trimmed, similar to overflow: hidden;

Circle:

  • R: circular image radius.
  • Cx /cy: the center x and y coordinates of the circular image, which is set to half of its width and height, i.e. the positive center, relative to the reference viewBox.
  • Fill: The color of the circular image, which is of course transparent, can be set to None or transparent.
  • Stroke: Round image contour color, similar to border-color.
  • Stroke-width: circular image contour width, similar to border-width.
  • Key attributes: stroke-Dasharray, stroke-Dashoffset
  1. stroke-dasharray:

  • This property defines the outline of a circular image as solid line – dotted line – solid line – dotted line…… 10 indicates the length of the solid line and dotted line. 10, 20 indicates the length of the solid line is 10, and the dotted line length is 20.

  • The coordinate axis of the circular image is established with the center of the circle as the origin. The starting point of segmentation is the intersection between the circular image and the positive half axis of the X axis. The initial starting point can be changed by using Transfrom: Rotate ().

  • The brush direction is clockwise.

  1. stroke-dashoffset
  • Offset means offset. This attribute can offset the contour drawn by stroke-Dasharray. Positive values are offset to the left, and negative values are offset to the right.

These two important attributes work together to create this animation.

2.

1. First let’s draw the simplest circular image, like this:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" > // The reason why I subtracted 5 here is because adding the width of the outline will stretch out of the viewBox. Viewers can experience it for themselves. // div is not set to box-sizing: border-box <circle cx="100" cy="100" r="(100 - 5) / 2" stroke="#1661ab" fill="transparent" stroke-width="5" /> </svg>Copy the code

2. Next we’ll add some styles and animations (using the stroke-dasharray property) :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" > <circle class="svg-circle" cx="100" cy="100" r="(100 - 5) / 2" stroke="#1661ab" fill="transparent" stroke-width="5" /> </svg> <style> .svg-circle{ Animation: loading-dash 1.5s Linear Infinite; } // C represents the circumference of the circular image: C = 2 * math.pi * r // 2C dotted line length is just so that the next loop does not fill in the solid line when the offset is later. You could have 3C, 4C, 5C, and so on. @keyframes loading-dash { 0%{ stroke-dasharray: 1, 2C; } 100%{stroke-dasharray: 0.9c, 2C; } } </style>Copy the code

3. Now we add offset to the circular image:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" > <circle class="svg-circle" cx="100" cy="100" r="(100 - 5) / 2" stroke="#1661ab" fill="transparent" stroke-width="5" /> </svg> <style> .svg-circle{ Animation: loading-dash 1.5s Linear Infinite; } // Due to the offset effect, the solid line is covered by the dashed line behind it, so that an animation effect can be created to erase the previous outline fill-in. // The stroke-dashoffset C front of the coefficient viewer can modify, choose their own favorite coefficient. @keyframes loading-dash { 0%{ stroke-dasharray: 1, 2C; stroke-dashoffset: 0; } 50%{stroke-dasharray: 0.9c, 2C; stroke-dashoffset: -.4C; } 100%{stroke-dasharray: 0.9c, 2C; stroke-dashoffset: -C; } } </style>Copy the code

4. As a final step, rotate the SVG.

<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" > <circle class="svg-circle" cx="100" cy="100" r="(100 - 5) / 2" stroke="#1661ab" fill="transparent" stroke-width="5" /> </svg> <style> .svg{ animation: loading-rotate 2s linear infinite; }. SVG -circle{animation: loading-dash 1.5s linear infinite; } @keyframes loading-rotate { 0%{ transform: rotate(0); } 100%{ transform: rotate(360deg); } } @keyframes loading-dash { 0%{ stroke-dasharray: 1, 2C; stroke-dashoffset: 0; } 50%{stroke-dasharray: 0.9c, 2C; stroke-dashoffset: -.4C; } 100%{stroke-dasharray: 0.9c, 2C; stroke-dashoffset: -C; } } </style>Copy the code

3. The last

With a good understanding of stroke-dasharray and stroke-dashoffset, you can also write lots of silly loading effects.

Like this one: