Three Loading production schemes

Loading is a component that almost every application uses. Many component libraries provide corresponding Loading components, but sometimes we may need to customize the Loading effects. Therefore, it is necessary to master the basic knowledge of making Loading components. Loading is mainly a rotating ring, while the rotating part is relatively simple and can be realized directly through CSS animation. Therefore, the key part is to obtain the Loading ring.

1. Draw a circle through border-radius

We usually circle an element by making it a square of equal length and width, and then giving the element a border-radius value of 50%. Note that border-radius: 50% makes the entire square element round, including the border and content area. So we can draw a circle by controlling the size of the border and content area of the element, using the content area of the element as the inner circle and the border area of the element as the outer circle.

<div class="loading-css"></div> .loading-css { width: 50px; /* Make the loading area square */ height: 50px; display: inline-block; /* Border: 3px solid #f3f3f3; /* Border: 3px solid #f3f3f3; /* Set the border size and color to light white */ border-top: 3px solid red; /* Set the top border color to red highlight so that the rotation can be seen */ border-radius: 50%; /* Circle both the border and the content area */}Copy the code

The effect is as follows:

The ring effect is already out. Now you can rotate the ring, like:

@keyframes loading-360 { 0% { transform: rotate(0deg); Transform: rotate(360deg); rotate(360deg); rotate(360deg); rotate(360deg); /* Animation: loading-360 0.8s infinite linear; /* Animation: loading-360 0.8s infinite linear; /* Add an animation to the circle that rotates 360 degrees an infinite number of times */}Copy the code

Draw a circle in SVG

SVG, which stands for Scalable Vector Graphics, uses AN XML format to define images, and labels can be used to create a circle, with a label nested outside.

<svg viewBox="0 0 50 50" class="loading-svg"> <circle cx="25" cy="25" r="20" fill="none" class="path"></circle> </svg> .loading-svg { width: 50px; /* Set the size of the SVG display area */ height: 50px; }Copy the code

The width and height of the tag set the size of the displayable area of the SVG image. Because the drawing area of a vector graph can be infinitely large, the specific drawing area depends on the specific Settings. For example, the circle above is drawn in a circular area with the center coordinates of (25,25) and the radius of 20, and the viewBox is set to 0, 0, 50, 50. Denotes that the screenshot area is in the rectangular area with coordinates of (0, 0) in the upper left corner and (50,50) in the lower right corner, that is, the vector image in this area will be captured, and then the captured vector image will be placed in the displayable area of SVG, and scaled in proportion to the size of displayable area of SVG. However, the captured image must be fully displayed in the SVG displayable area.

Suppose, for now, that the SVG size is set to 60px, as in:

loading-svg { width: 60px; /* Set the size of the SVG display area */ height: 60px; }Copy the code

According to the above analysis, in the viewBox screenshot area, the center of the circle drawn is exactly in the center of the screenshot area, so the distance between the frame around the screenshot area and the drawn circle is 5px, and the radius of the circle is 20px, so the ratio is 1:4. Now change the SVG display area to 60px. Therefore, it is necessary to enlarge the screenshot area to cover the entire SVG display area. After stretching the screenshot area, the center of the circle becomes (30,30), that is, the radius becomes 30. According to the ratio of 1:4, the radius becomes 24 and the periphery becomes 6, so the whole circle will also become larger.

Note that the circles drawn are currently invisible because no color has been set for the brush, as in:

.path { stroke: #409eff; /* Set a color for the brush */ stroke-width: 2; /* Set the width of the line */Copy the code

Now you can see the circle you’ve drawn. To add the rotation effect to the ring, we need to draw a circle with notches, and then change the size of the notches to achieve the rotation effect, such as:

.path { stroke-dasharray: 95, 126; /* Set the implementation length to 95, dashed line length to 126*/ stroke-dashoffset: 0; /* Set the offset position of the dashed line */}Copy the code

As shown in the figure, the ring is drawn from the horizontal right-most point and then clockwise. Because the circumference of the ring is 2

3.14

20=125.6, approximately equal to 126, strok-Dasharray sets the solid (visible) line to be 95, approximately equal to 3/4 of the circle, so only the highest point of the circle can be drawn, followed by a dashed line of 126, but the circumference of the circle is only 126, so only a dashed line of 31 can be displayed. Can be seen as an infinite loop horizontal lines, solid lines (221, 0) – a dotted line (126, 0) – the starting point of (0, 0) – solid lines (95, 0) – a dotted line (221, 0) – solid lines (316, 0), and then let the starting point of the horizontal line (0, 0) and circle the beginning position overlap, The horizontal line follows the circle clockwise, and the dashed line (-126,0) to the left slowly shows up as the stroke-Dashoffset starts offset. The top line is pulled to the right when the stroke-dashoffset value is negative, and the bottom line is pulled to the right when the stroke-dashoffset value is positive.

The next step is to add the rotation effect of the ring and set three animation states respectively, such as:

// 0% { stroke-dasharray: 1, 126; /* solid line part 1, dashed line part 126*/ stroke-dashoffset: 0; /* * * * * * * * * * * * * * *Copy the code

Draw a solid line with a distance of 1 pixel from the right of the ring as the starting point, and then draw a dashed line (blank) with a distance of 126 pixels. Since the circumference is 126, the rest is blank, as shown in the figure.

// 50%{ stroke-dasharray: 95, 126; /* Solid part 95, dashed part 126*/ stroke-dashoffset: -31px; /* Offset clockwise by 31/126, i.e. the first 31/126 shows blank space and the last 3/4 shows lines */}Copy the code

Starting from the far right of the ring and moving 31 pixels clockwise, which is 1/4 of the ring, so the starting point of the solid line becomes the bottom of the ring, which is 95 pixels long, which is 3/4 of the ring, as shown in the figure.

// 100%{ stroke-dasharray: 6, 120; /* Solid line part 6, dashed line part 120*/ stroke-dashoffset: -120px; /* Finally, clockwise offset 120/126, that is, the first 120/126 shows blank, the last 6 points show the line part */Copy the code

Starting from the far right of the circle and moving 120 pixels clockwise, the solid line is only 6 pixels long, as shown.

Animate the ring like this:

. Path {animation: loading-dash 1.5s ease-in-out infinite; } @keyframes loading-dash { 0% { stroke-dasharray: 1, 126; /* solid line part 1, dashed line part 126*/ stroke-dashoffset: 0; /* front 1/126 shows solid line, back 125 shows blank */} 50% {stroke-dasharray: 95, 126; } to {stroke-dasharray: 6, 120; /* Solid line part 6, dashed line part 120*/ stroke-dashoffset: -120px; /* The first point is blank and the last 6 points are blank */}}Copy the code

To make the Loading animation more vivid and delicate, we can also add a rotation animation to the SVG tag, such as:

.loading-svg { width: 50px; /* Set the size of the SVG display area */ height: 50px; Animation: loading-rotate 1.5s infinite ease-in-out; } @keyframes loading-rotate {to {transform: rotate(1turn); // Rotate 1 circle}}Copy the code

3. Use the iconfont font icon

We can directly use iconfont font ICONS to replace the drawing of the ring, display the ring directly in the form of font, and then add rotation animation to it. For example, we can download our favorite Loading pattern from the iconfont website. After downloading the font icon, copy the extracted content to the project, and introduce the iconfont. CSS into the page, add iconFONT style to the element to display the font icon, and the font icon will have a corresponding Unicode encoding. To display the font icon, set content to the Unicode encoding by ::before, or simply prefix \&#x to the Unicode code as element content.

<link rel="stylesheet" href="icon/iconfont.css"> <style> .icon-loading { display: inline-block; /* Font-size: 56px; color: grey; } .icon-loading::before { content: "\e65b"; </style> < I class="icon-loading iconfont"></ I ><! < I class="iconfont">&#xe65b</ I > <! - the value of & # xunicode -- -- >Copy the code

Then rotate the font icon, for example:

.icon-loading { animation: rotating 2s infinite linear; 0%} @ keyframes rotating {{transform: the rotate (0 deg) / * animation starting position for spin 0 degrees * /} to {transform: the rotate (1 turn) / * * 1 turns end animation is /}}Copy the code

If you think this article is good, share it, like it, and like it