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
How InnoDB implements serialization isolation level
Serialization implementation InnoDB implements se...
How to add Vite support to old Vue projects
1. Introduction I have taken over a project of th...
Mysql date formatting and complex date range query
Table of contents Preface Query usage scenario ca...
Simple examples of creating stored procedures, triggers and using cursors in Navicat (pictures and text)
1. Create tables <br /> First, create two t...
CSS3 realizes the graphic falling animation effect
See the effect first Implementation Code <div ...
WeChat applet example of using functions directly in {{ }}
Preface In WeChat applet development (native wxml...
Use of Linux gzip command
1. Command Introduction The gzip (GNU zip) comman...
Detailed explanation of the implementation process of dual-master synchronization of partial tables in MySQL 5.7
Preface Recently, I encountered a requirement. Du...
Vue implements simple slider verification
This article example shares the implementation of...
A brief understanding of MySQL SELECT execution order
The complete syntax of the SELECT statement is: (...
Detailed explanation of the standard MySQL (x64) Windows version installation process
MySQL x64 does not provide an installer, does not...
Jenkins Docker static agent node build process
A static node is fixed on a machine and is starte...
Vue+Router+Element to implement a simple navigation bar
This project shares the specific code of Vue+Rout...
Detailed explanation of three ways to configure Nginx virtual hosts (based on IP)
Nginx supports three ways to configure virtual ho...
Example code for implementing concurrent request control in JavaScript/TypeScript
Scenario Suppose there are 10 requests, but the m...