El cargador de CSS es útil cuando una determinada página tardó unos segundos en cargar el contenido de la página web. Cuando el usuario tiene que esperar a que el contenido se cargue por completo en la página web. Si la página web determinada no tiene el cargador de CSS, el tiempo de carga hará que el usuario piense que la página web no responde en absoluto. Por lo tanto, poner el cargador de CSS en la página web hace que el usuario se distraiga o espere unos segundos hasta que la página esté completamente cargada. El CSS se puede usar para diseñar y agregar animaciones y otros gráficos en movimiento visuales en una página web. En el siguiente código se explica una pequeña demostración de animaciones bajo CSS.
Ejemplo 1: este ejemplo crea el cargador de CSS mediante CSS.
<!DOCTYPE html>
<html>
<head>
<title>css loader</title>
<style>
h1{
color:green;
}
.gfg {
display: block;
position: absolute;
width: 10px;
height: 10px;
left: calc(50% - 1em);
border-radius: 1em;
transform-origin: 1em 2em;
animation: rotate;
animation-iteration-count: infinite;
animation-duration: 1.8s;
}
/* Rotation of loader dots */
@keyframes rotate {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.g1 {
animation-delay: 0.1s;
background-color: #1D8348;
}
.g2 {
animation-delay: 0.2s;
background-color: #239B56;
}
.g3 {
animation-delay: 0.3s;
background-color: #2ECC71;
}
.g4 {
animation-delay: 0.4s;
background-color: #82E0AA ;
}
.g5 {
animation-delay: 0.5s;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Loader</h4>
<div class='loader'>
<div class='gfg g1'></div>
<div class='gfg g2'></div>
<div class='gfg g3'></div>
<div class='gfg g4'></div>
<div class='gfg g5'></div>
</div>
</center>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo crea el cargador de CSS mediante CSS.
<!DOCTYPE html>
<html>
<head>
<title>css loader</title>
<style>
h1{
color:green;
}
.gfg {
display: block;
position: absolute;
width: 100px;
height: 10px;
left: calc(58% - 5em);
transform-origin: 1px 10px;
animation: rotate;
animation-iteration-count: infinite;
animation-duration: 2.8s;
}
/* Rotation of loader dots */
@keyframes rotate {
from {
transform: rotateY(50deg);
}
to {
transform: rotateY(360deg);
}
}
.g1 {
animation-delay: 0.1s;
background-color: #1D8348;
}
.g2 {
animation-delay: 0.2s;
background-color: #239B56;
}
.g3 {
animation-delay: 0.3s;
background-color: #2ECC71;
}
.g4 {
animation-delay: 0.4s;
background-color: #82E0AA ;
}
.g5 {
animation-delay: 0.5s;
background-color: #D5F5E3;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<h4>CSS Loader</h4>
<div class='loader'>
<div class='gfg g1'></div>
<div class='gfg g2'></div>
<div class='gfg g3'></div>
<div class='gfg g4'></div>
<div class='gfg g5'></div>
</div>
</center>
</body>
</html>
Producción: