Table of contents
4. Implementation steps and code
1. Operation effect
Picture effects
2. Project Overview
This project is a simple web page with loading animation effect. It uses CSS animation to create a rotating circular loading icon to provide users with ongoing visual feedback.
3. Development environment
Development environment: VsCode
Programming language: HTML5+CSS3
Operating system: Windows
4. Implementation steps and code
1. Create an empty folder
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>《编程乐学》- 加载动画效果</title>
</head>
<body>
</body>
</html>
2. Complete the page content
<div class="loading">
<span>拼命加载中</span>
</div>3. Complete the css style
This is a loading animation effect created using CSS animation. This loading animation is located in the center of the screen, with a rotating circle and two rotating circle borders. The background of the loading animation is a gradient color, which changes from top to bottom.
The key part of the CSS code is to define two animations using the @keyframes rule, named a1 and a2. Both animations have a duration of 2 seconds and play infinitely in a linear fashion. The a1 animation rotates the circle 360 degrees clockwise, while the a2 animation rotates the text 360 degrees counterclockwise.
With this loading animation effect, you can use it when a page is loading or performing other time-consuming operations to provide a visual feedback to the user that the operation is in progress, so as not to make the user feel unresponsive.
<style>
* {
/* 初始化 取消页面内外边距 */
margin: 0;
padding: 0;
}
body {
/* 100%窗口高度 */
height: 100vh;
/* 渐变背景 */
background: linear-gradient(to bottom, #2b5876, #09203f);
/* 弹性布局 水平、垂直居中 */
display: flex;
justify-content: center;
align-items: center;
}
.loading {
width: 200px;
height: 200px;
box-sizing: border-box;
border-radius: 50%;
border-top: 10px solid #63a69f;
/* 相对定位 */
position: relative;
/* 执行动画（动画a1 时长 线性的 无限次播放） */
animation: a1 2s linear infinite;
}
.loading::before,
.loading::after {
content: "";
}
.loading::before {
border-top: 10px solid #f2e1ac;
/* 旋转120度 */
transform: rotate(120deg);
}
.loading::after {
border-top: 10px solid #f2836b;
/* 旋转240度 */
transform: rotate(240deg);
}
</style>5. Project Summary
In this project, I used HTML and CSS to create a loading animation effect. First, I defined a div container that contains the loading animation, and set the width, height, and border style of the container. Then, I used the pseudo-elements ::before and ::after to create two rotating sectors, setting their colors and rotation angles respectively. Finally, I added a text element inside the container to display the loading text.
In the CSS part, I used keyframe animation @keyframes to define the animation effect of the rotation. I created two animations, a1 and a2, which control the rotation of the two fan-shaped elements respectively. Achieve the rotation effect by setting the transform attribute, and use the infinite keyword to make the animation loop infinitely.
In addition, I also set the background gradient and page centering styles to improve the aesthetics and user experience of the page.
Through this project, I learned how to use CSS to create simple animation effects and understood the basic usage of keyframe animation. This loading animation can be used in actual web projects to provide visual feedback of ongoing operations and improve user experience.
6. Source code acquisition
✨You can also follow Gong Zonghao's " Programming for Fun ". There are many high-quality open source projects and more programming materials waiting for you to learn in the menu bar.