How to implement a simple Loading effect with CSS-Front-end Q&A-php.cn

How to implement a simple Loading effect with CSS

PHPz

Release： 2023-04-26 16:16:14

Original

3330 people have browsed it

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:

Copy after login

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

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

Copy after login

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;
}

Copy after login

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);
}

Copy after login

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);
}

Copy after login

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:

Copy after login

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);
  }
}

Copy after login

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;
}

Copy after login

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!