Un Wave Loader se puede usar en sitios web cuando algo se está cargando, proporcionará una mejor experiencia de usuario. El Wave Loader se puede crear fácilmente usando HTML y CSS.
Código HTML: en esta sección, crearemos una etiqueta div básica que consta de varias etiquetas de intervalo dentro de ella.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Wave Loader</title> </head> <body> <div> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </body> </html>
Código CSS: En esta sección, primero diseñaremos el elemento span usando algunas propiedades básicas de CSS, luego usaremos el Selector nth-child() para seleccionar cada elemento span, es decir, el nth child y luego crearemos la animación de carga usando @ regla de fotogramas clave .
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 30px;
width: 7px;
margin-right: 10px;
background-color: green;
animation: loading 1s linear infinite;
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
// @keyframes for animation
@keyframes loading {
0%{
height: 0;
}
25%{
height: 25px;
}
50%{
height: 50px;
}
100%{
height: 0;
}
}
</style>
Código final: es la combinación de las dos secciones de código anteriores.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Wave Loader</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
div{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
span{
height: 30px;
width: 7px;
margin-right: 10px;
background-color: green;
animation: loading 1s linear infinite;
}
span:nth-child(1){
animation-delay: 0.1s;
}
span:nth-child(2){
animation-delay: 0.2s;
}
span:nth-child(3){
animation-delay: 0.3s;
}
span:nth-child(4){
animation-delay: 0.4s;
}
span:nth-child(5){
animation-delay: 0.5s;
}
@keyframes loading {
0%{
height: 0;
}
25%{
height: 25px;
}
50%{
height: 50px;
}
100%{
height: 0;
}
}
</style>
<body>
<div>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA