How to implement a simple Loading effect with CSS

In front-end development, Loading is a very common function. When the web page data is loaded, we hope to give the user a visual feedback while waiting to enhance the user experience. In this article, we will implement a simple Loading effect through CSS.

1. Use Animation animation to implement Loading

Animation is a new module in CSS3, which can be used to create very complex animation effects. Here we use Animation to create a Loading effect.

First add a container for the Loading effect in HTML:

<div class="loading">
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
  <div class="loading-circle"></div>
</div>

Next, define a keyframe animation in CSS for rotating the "circle".

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Then style the .loading-circle class to make it a circle and use the animation defined above within it.

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

Finally, style the container in .css-loading so that it is centered on the page, and adjust the position and size of the "circle" appropriately.

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

The complete implementation code is as follows:

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  animation: rotate 1.5s ease-in-out infinite;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading-circle:nth-child(1) {
  transform: translateY(-30px);
}
.loading-circle:nth-child(2) {
  transform: translateY(30px);
}

2. Use Transition to implement Loading

In addition to Animation, we can also use Transition in CSS to achieve the Loading effect .

We also add a container in HTML as the display area of ​​Loading:

<div class="loading-2">
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
  <div class="loading-circle-2"></div>
</div>

In CSS, we define the initial state and final state for the .loading-circle-2 class, and use Transition to achieve smooth transition between states.

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

Finally, we set styles on the .loading-2 element so that it is centered on the page.

The complete implementation code is as follows:

.loading-circle-2 {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #333;
  margin: 0 10px;
  transform: scale(0);
  transition: transform 0.5s ease 0.2s;
}

.loading-2 .loading-circle-2:nth-child(1) {
  animation: delay 0.2s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(2) {
  animation: delay 0.3s linear infinite;
}
.loading-2 .loading-circle-2:nth-child(3) {
  animation: delay 0.4s linear infinite;
}

@keyframes delay {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

.loading-2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. Summary

This article shows how to use CSS to achieve the Loading effect through two different methods. Although Animation is relatively complex, it can create very rich and diverse animation effects. Transition is more concise and easy to understand, and can achieve some simple animations.

In general, using CSS to implement Loading is a relatively simple way, which can effectively improve the user experience. Of course, in actual development, we may also need to make some adjustments and style optimization based on the actual needs of the project.

The above is the detailed content of How to implement a simple Loading effect with CSS. For more information, please follow other related articles on the PHP Chinese website!