Sample code for CSS dynamic loading bar effect
|
Using the knowledge of CSS variables, I will directly post the code and the comments I added
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Show a CSS dynamic loading bar</title>
<style>
/* Using CSS variables */
.flex {
display: flex;
list-style: none;
/* Set the li elements to be arranged horizontally */
}
.loading {
width: 200px;
height: 200px;
}
.loading>li {
/* We define a CSS variable for each inline element of the li element -- line-index has different sizes*/
/* At this time, set an animation delay variable--time after calculation calc */
--time: calc((var(--line-index) - 1) * 200ms);
border-radius: 3px;
width: 6px;
height: 30px;
background-color: #f66;
/* The animations are all the same, but they start at different times, which results in this effect*/
animation: beat 1.5s ease-in-out var(--time) infinite;
}
.loading>li+li {
margin-left: 5px;
}
@keyframes beat {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(.5);
}
}
</style>
</head>
<body>
<ul class="loading flex">
<li style="--line-index: 1;"></li>
<li style="--line-index: 2;"></li>
<li style="--line-index: 3;"></li>
<li style="--line-index: 4;"></li>
<li style="--line-index: 5;"></li>
<li style="--line-index: 6;"></li>
</ul>
</body>
</html>See the effect
This is the end of this article about the CSS dynamic loading bar source code. For more relevant CSS dynamic loading bar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future! |
<<: Summary of several APIs or tips in HTML5 that cannot be missed
>>: Several ways to schedule backup of MySQL database (comprehensive)
Recommend
Introduction to the process of using NFS remote directory mounting in CentOS environment
Table of contents 1. Introduction to NFS 2. NFS C...
Vue-cli framework implements timer application
Technical Background This application uses the vu...
Detailed explanation of the principle and function of JavaScript closure
Table of contents Introduction Uses of closures C...
jQuery implements sliding tab
This article example shares the specific code of ...
IDEA2021 tomcat10 servlet newer version pitfalls
Because the version I used when I was learning wa...
React+ts realizes secondary linkage effect
This article shares the specific code of React+ts...
Detailed explanation of the usage of MySQL memory tables and temporary tables
Usage of MySQL memory tables and temporary tables...
MySQL transaction, isolation level and lock usage example analysis
This article uses examples to describe MySQL tran...
Docker memory monitoring and stress testing methods
The Docker container that has been running shows ...
A solution to a bug in IE6 with jquery-multiselect
When using jquery-multiselect (a control that tra...
Ideas and methods for realizing real-time log reporting with Nginx pure configuration
Table of contents Preface Implementation ideas Im...
Complete steps to use samba to share folders in CentOS 7
Preface Samba is a free software that implements ...
Div exceeds hidden text and hides the CSS code beyond the div part
Before hiding: After hiding: CSS: Copy code The co...
Tomcat uses Log4j to output catalina.out log
Tomcat's default log uses java.util.logging, ...
A brief analysis of the function calling process under the ARM architecture
Table of contents 1. Background knowledge 1. Intr...