Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

In the comments section of the last post someone told me the source address of these loads (I added it because I didn’t know it before) :address

preface

Let’s be clear: the loads covered in this series are collected, not implemented by this author, and only CSS parsing is covered in this article. Don’t spray if you don’t like it!! .

Like to ask a free praise, welcome to comment area exchange

Why write this article? During normal development, we encounter loading, either in the UI framework, or baidu, and then CV into the project? However, their own implementation, and there will be no idea. Over time, HE became a CV engineer. This article is for different loading methods, explain the ideas, I hope you can not only use, but also write. Real knowledge comes from practice.

This article only introduces circle loading. Others will be covered in other articles.

loader-1

This should be the simplest CSS loading ever. There is a red circle on the top of the circle. If you look carefully, you will see that the circle is exactly 1/4.

Implementation logic:

A container of equal width and height, set border to white. And I’m going to make the bottom red,When border-radius is set to 50%, it can be turned into a circle.

Animate the circle with rotation. The rotation animation in the CSS is rotate() and we just have to rotate it from 0 to 360. (This animation will be used several times below and will not be described below.)

 @-webkit-keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg); }}Copy the code

The complete code

.loader-1 {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
Copy the code

loader-2

Observation: Outside is a circle with a red element rotating inside.

Implementation logic

A container of equal width and height, with white edges, and 50% rounded corners. So that’s the outer circle.

How is the red inside achieved? There are two ideas here. 1; Add a small div, put it inside, and set a red bottom just like loader-1. 2: Use ::after.

Plus the rotation animation.

The complete code

.loader-2 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

Copy the code

.loader-2:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}
Copy the code

loader-3

Observation: The inside is a circle and the outside is a red arc.

Implementation logic

This loading effect is the same as loader-2, the difference is that the red arc is inside and outside.

The complete code

.loader-3 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
Copy the code

.loader-3:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-bottom-color: #FF3D00;
}
Copy the code

loader-4

Observation: There is a circle on the outside and two circles on the inside, which happen to be symmetric.

Implementation logic

A container of equal width and height, with white edges, and 50% rounded corners. So that’s the outer circle.

How is the red inside achieved? There are two ideas here. 1; Add two small divs, set the background color to red, and set the corners to 50% rounded so they look like dots. 2. Use ::after and ::before.

Plus the rotation animation.

The complete code

.loader-4 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
Copy the code

.loader-4:before {
    left: auto;
    top: auto;
    right: 0;
    bottom: 0;
    content: "";
    position: absolute;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(150%.150%);
    border-radius: 50%;
}
Copy the code

.loader-4:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: #FF3D00;
    width: 6px;
    height: 6px;
    transform: translate(150%.150%);
    border-radius: 50%;
}
Copy the code

loader-5

Observation: There are three layers, the outermost white circle, the middle red circle and the inner white circle. Each circle has a half-circle gap, and the outer circle and the innermost circle rotate in the same direction.

Implementation logic

A container of equal width and height, with white edges, and 50% rounded corners. So that’s the outer circle.

The problem here is how to achieve the circle gap, in fact very simple, CSS has a property value:transparent, using this value to set the border transparent, you can achieve the gap.

For the inner red and white arcs, continue using ::after and ::before.

Plus animation, there’s a rotationBack animation. Here set rotation to negative Angle, rotation can be rotated in the opposite direction.

  @keyframes rotationBack {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg); }}Copy the code

The complete code

.loader-5 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    border: 3px solid;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}
Copy the code

.loader-5:before {
    width: 32px;
    height: 32px;
    border-color: #FFF #FFF transparent transparent;
    -webkit-animation: rotation 1.5 s linear infinite;
    animation: rotation 1.5 s linear infinite;
}
Copy the code

.loader-5:after, .loader-5:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border: 3px solid;
    border-color: transparent transparent #FF3D00 #FF3D00;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-animation: rotationBack 0.5 s linear infinite;
    animation: rotationBack 0.5 s linear infinite; 
    transform-origin: center center; *}Copy the code

loader-6

Observation: Looks like a clock, a circle with a hand inside.

Implementation logic

A container of equal width and height, with white edges, and 50% rounded corners. So that’s the outer circle.

How Pointers are implemented: We won’t discuss new divs from here on out. In fact, the red pointer is simply a container of inconsistent width and height.

The complete code

.loader-6 {
    width: 48px;
    height: 48px;
    border: 2px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

Copy the code

.loader-6:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    background: #FF3D00;
    width: 3px;
    height: 24px;
    transform: translateX(-50%);
}
Copy the code

loader-7

Observation: First identify a number of circles, two in total. While the first circle has not disappeared, the second circle has appeared. The result is a wave like effect. Also note that these two circles are the same size, because they end up in the same place.

Implementation logic

First of all, let’s make sure that these two circles are on the container. The above always adds a border to the container, of course this example could do the same, but for simplicity we put the two circles in ::after and ::before.

With animation, the circles here are gradually zoomed in, and in CSS scale is used to zoom in and out of elements. At the same time, to achieve the effect of gradually clear ripples, we added transparency.

@keyframes animloader7 { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; }}Copy the code

The complete code

Here, because the two circles appear successively, a circle plus delay is needed

.loader-7 {
    width: 48px;
    height: 48px;
    display: inline-block;
    position: relative;
}
Copy the code

.loader-7::after..loader--7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}
Copy the code

.loader-7::after {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}
.loader-7::after..loader-7::before {
    content: "";
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #FFF;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: animloader7 2s linear infinite;
    animation: animloader7 2s linear infinite;
}

Copy the code

loader-8

Observation: an arc with a triangle.

Implementation logic

A container of equal width and height, with white edges, and 50% rounded corners. So that’s the outer circle.

transparent, using this value to set the border transparent, you can achieve the gap.

Create arrows on :after. There are several ways to implement triangles in CSS, the simplest of which is to use border. You don’t need to set the width and height of the element, just set the size of the border, and only set the color on one side.

border: 10px solid transparent;
border-right-color: #FFF
Copy the code

Plus rotation animation.

The complete code

.loader-8 {
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}

Copy the code

.loader-8:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 31px;
    border: 10px solid transparent;
    border-right-color: #FFF;
    transform: rotate(-40deg);
}
Copy the code

Afterword.

Sorting is not easy, for a free praise, welcome to comment area exchange

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Rotate the CSS load!

preface

loader-1

Implementation logic:

The complete code

loader-2

Implementation logic

The complete code

loader-3

Implementation logic

The complete code

loader-4

Implementation logic

The complete code

loader-5

Implementation logic

The complete code

loader-6

Implementation logic

The complete code

loader-7

Implementation logic

The complete code

loader-8

Implementation logic

The complete code

Afterword.

Rotate the CSS load!

preface

loader-1

Implementation logic:

The complete code

loader-2

Implementation logic

The complete code

loader-3

Implementation logic

The complete code

loader-4

Implementation logic

The complete code

loader-5

Implementation logic

The complete code

loader-6

Implementation logic

The complete code

loader-7

Implementation logic

The complete code

loader-8

Implementation logic

The complete code

Afterword.

Related Posts

Let’s talk about currization of a function from an interview question

Canvas path, Canvas state, and others

Anti-shake and throttling