Use pure css to achieve simple loading animation effect (code example)

This article uses code examples to introduce how to use pure CSS to achieve a simple loading animation effect. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

[Recommended tutorial: CSS video tutorial]

I saw that many websites currently use gif images for their loading effects, so I’m curious, how can I achieve this using just CSS? Good stuff is coming, please pick it up.

Difficulty factor

##☆☆☆☆

Rendering

Ideas

CSS is used to modify HTML, so even the simplest effects depend on HTML, and the HTML layout of the effect in this example is even more important. heavy.

Let’s first analyze the composition of the animation effect:

Lines
• If the loading is still, several lines form a circle
  • The length of these lines The same, but the direction is different
  • Each line does not run through the entire diameter, but is based on the radius
Circle
• The overall effect is a Ring, the background color of the inner circle is consistent with the entire background
Animation
• Starting from a certain line, the color (transparency) of each radius line changes one by one

To sum up, we use the following steps to unlock the mystery of the loading effect step by step:

(1) Use HTML to realize the same lines distributed along a certain point , they form a circle

(2) Draw a small circle, add a background color, and cover it to the center of the line

(3) Add a gradient animation to change the transparency of the line

(4) By setting different animation delays for different lines, make the lines move

HTML

<div id="container">
	<div class="load-line rotate-0">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-30">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-60">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-90">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-120">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div class="load-line rotate-150">
		<span class="left"></span>
		<span class="right"></span>
	</div>
	<div id="circle-center"></div>
</div>

Analysis:

load-line represents a radius line with the same diameter. Since the rotation direction is the same, put it in the same p
Since the animation delay of each radius line is different, add left and right lines
circle-center represents the inner circle

CSS

#container, #circle-center {
	background: grey;
}
#container {
	position: relative;
	width: 600px;
	height: 300px;
}
#circle-center {
	position: absolute;
	top: 100px;
	left: 250px;
	width: 100px;
	height: 100px;
	border-radius: 100px;
}
.load-line {
	position: absolute;
	top: 150px;
	left: 200px;
	width: 200px;
	height: 13px;
}
.load-line > span {
	display: inline-block;
	width: 50%;
	height: 100%;
	border-radius: 20px;
	background: white;
}
.left {
	float: left;
}
.right {
	float: right;
}
.rotate-0 {
	transform: rotate(0);
}
.rotate-0 > .left {
	animation: load-effect 1.2s linear 0s infinite;
}
.rotate-0 > .right {
	animation: load-effect 1.2s linear 0.6s infinite;
}
.rotate-30 {
	transform: rotate(30deg);
}
.rotate-30 > .left {
	animation: load-effect 1.2s linear 0.1s infinite;
}
.rotate-30 > .right {
	animation: load-effect 1.2s linear 0.7s infinite;
}
.rotate-60 {
	transform: rotate(60deg);
}
.rotate-60 > .left {
	animation: load-effect 1.2s linear 0.2s infinite;
}
.rotate-60 > .right {
	animation: load-effect 1.2s linear 0.8s infinite;
}
.rotate-90 {
	transform: rotate(90deg);
}
.rotate-90 > .left {
	animation: load-effect 1.2s linear 0.3s infinite;
}
.rotate-90 > .right {
	animation: load-effect 1.2s linear 0.9s infinite;
}
.rotate-120 {
	transform: rotate(120deg);
}
.rotate-120 > .left {
	animation: load-effect 1.2s linear 0.4s infinite;
}
.rotate-120 > .right {
	animation: load-effect 1.2s linear 1.0s infinite;
}
.rotate-150 {
	transform: rotate(150deg);
}
.rotate-150 > .left {
	animation: load-effect 1.2s linear 0.5s infinite;
}
.rotate-150 > .right {
	animation: load-effect 1.2s linear 1.1s infinite;
}
@keyframes load-effect {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

Analysis:

The parent container of the entire effect Non-static positioning needs to be set to facilitate the layout of child elements. This example is relative
• All lines have the same size and have rounded corners
• The rotation angles of lines along the same diameter direction are the same
• The animation effect of all lines is the same (the transparency is changing) , the animation duration is the same, the animation delay starts from a certain line and increases one by one

For more programming-related knowledge, please visit:

Programming Video! !

The above is the detailed content of Use pure css to achieve simple loading animation effect (code example). For more information, please follow other related articles on the PHP Chinese website!