CSS 3 + js
The core is to show and hide, and rely on hierarchy to control the loading process of the circle.

svg

SVG is an image format based on XML syntax and stands for Scalable Vector Graphics. It is essentially a text file, small in size and undistorted no matter how many times it is enlarged.

features

SVG files can be inserted directly into a web page, become part of the DOM, and then manipulated with JavaScript and CSS.

grammar

The SVG code is placed in the top tag < SVG >.

// Example 1 < SVG width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
</svg>
Copy the code

Of course, there are many basics to SVG that you can learn by clicking here. What we’re going to use today are the DEFs and circle tags and we’re going to look at the basic usage of those two tags. So in example 1, we’re going to create a circle. Cx, cy defines the center of the circle, which defaults to 0,0, and r defines the radius of the circle.

Here we can change the style of the circle by adding the class name to SVG, of course we need a few more properties to make a circle. Stroke, stroke, stroke – dasharray – dashoffset, fill, stroke – width attributes.

Stroke property: Defines the color of the outer contour of a given graphic element. Its default value is None.

The stroke-width property: specifies the width of the current object’s contour. Its default value is 1

  • stroke-dasharrayattributeBy default, the dotted line length is None. This value is composed of two values separated by commas (,).The first value is the length of each solid line segment drawn, and the second value is the length of the space between the segments. If there is no separation, both values are of the same size.

The stroke-Dashoffset property: indicates the start offset of the dotted line loading the focus of the ring effect will be illustrated later

  • fill attribute: The fill color of the graphic element, set to None for the circle effect

The instance

Now that we’ve introduced the properties above, let’s see what they can do. First, how do we make a circle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="50" cy="50"  r="40" fill=none stroke=red stroke-dasharray="10" stroke-width=5  />
</svg> 
Copy the code

stroke-dashoffset
stroke-dashoffset



Zhang Xinxu
Stroke - dasharray and stroke - dashoffset

Stroke-dasharray takes two parameters, separated by one representing length (dash) and one representing spacing (gap) such as ‘10,5’ multiple values: ‘10,5, 20,10’ is a group of two separated by a space, and the stroke-dasharray line is not only styled as a dashed line, but circulates according to the length and spacing of the dashed line

stroke-dasharray

stroke-dasharray
stroke-dashoffset
The stroke-Dashoffset property specifies the distance from dash to the start of the path
dash+gap

When stroke-dashoffset is not set, all lines are displayed in the viewable area. When stroke-dashoffset is set to 200, all lines are moved to the left, and lines are dynamically generated by dynamically reducing the value to 0.

Dynamic ring loading

With the line example, we know that the line we see in the visual area is dash in the stroke-Dasharray property, and the spacing is set by gap, and then the distance between dash and gap is adjusted by stroke-dashoffset. Typically, you set dash to the same value as gap and stroke-dashoffset, and then dynamically reduce stroke-Dashoffset to move the dash portion into the viewable area for animation. With theoretical knowledge, let’s practice the loading of circles.

<svg xmlns="http://www.w3.org/2000/svg"
      version="1.1"
      height="400">
      <defs>
        <linearGradient x1="20%"
          y1="50%"
          x2="10%"
          y2="100%"
          id="gradient1">
          <stop offset="0%"
            stop-color="Rgba (255,0,255,. 3)"></stop>
          <stop offset="100%"
            stop-color="rgba(0,255,255,.76)"></stop>
        </linearGradient>
      </defs>
      <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none></circle>
    </svg>
Copy the code

 <circle ref="myCircle"
        class="circle"
        cx="144"
        cy="126"
        r="120.5"
        stroke="url('#gradient1')"
        stroke-width="10"
        fill=none
        transform="The matrix (0, 1,1,0,0,270)"></circle>
Copy the code

transform: Matrix (s, a, a, S, D, d)s for scaling the first S for the X axis and the second one for the Y axis, a for tilting the first a for the Y axis tilting the second A code X axis, So 0 is the offset and the first one is the X-axis and the second one is the Y-axis, and d is the offset around xy
You can just write ‘rotate(-90)’ to change the orientation, and remember to set transform-origin

conclusion

This paper introduces the basic use of SVG, focusing on the principle of stroke-Dasharray attribute and stroke-Dashoffset attribute. It is also easy to use a loading ring. Let’s make a ring of our own. Next article will share mi band bar graph sliding animation implementation.

reference

  • Zhang Xinxu SVG Loading
  • SVG path stroke animation effect
  • drawing in SVG