La barra de carga con animación se puede crear usando HTML y CSS.
Crearemos un Loader que es la parte de un sistema operativo que se encarga de cargar programas y bibliotecas. La barra de progreso es un elemento de control gráfico que se usa para visualizar la progresión de una operación de computadora extendida, por lo que aquí usamos la barra de progreso como una animación en el cargador. Crearemos una barra de carga usando propiedades HTML y CSS.
Código HTML: En esta sección, diseñaremos la estructura básica del código HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Loader Bar</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <div class="loading_1"></div> <div class="loading_2">Loading GfG...</div> </div> </body> </html>
Código CSS: En esta sección, usaremos algunas propiedades CSS para diseñar la barra de carga . Usaremos @keyframes que especifica el código de animación. La animación se crea cambiando gradualmente de un conjunto de estilos CSS a otro. Los cambios en los estilos ocurren en porcentaje usando las palabras clave «desde» (0%) y «hasta» (100%). Podemos cambiar el conjunto de estilos CSS muchas veces.
<style>
body {
background-color: #262626;
font-family: Lato, sans-serif;
}
.loader {
width: 150px;
margin: 150px auto 70px;
position: relative;
}
.loader .loading_1 {
position: relative;
width: 100%;
height: 10px;
border: 1px solid yellowgreen;
border-radius: 10px;
animation: turn 4s linear 1.75s infinite;
}
.loader .loading_1:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 100%;
background-color: yellowgreen;
box-shadow: 10px 0px 15px 0px yellowgreen;
animation: load 2s linear infinite;
}
.loader .loading_2 {
position: absolute;
width: 100%;
top: 10px;
color: green;
font-size: 22px;
text-align: center;
animation: bounce 2s linear infinite;
}
@keyframes load {
0% {
width: 0%;
}
87.5% {
width: 100%;
}
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
6.25%,
50% {
transform: rotateY(180deg);
}
56.25%,
100% {
transform: rotateY(360deg);
}
}
@keyframes bounce {
0%,
100% {
top: 10px;
}
12.5% {
top: 30px;
}
}
</style>
Código completo: es la combinación de las dos secciones de código anteriores de HTML y CSS. En el siguiente código, hemos agregado el código CSS internamente en el código HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Loader Bar</title>
<style>
body {
background-color: #262626;
font-family: Lato, sans-serif;
}
.loader {
width: 150px;
margin: 150px auto 70px;
position: relative;
}
.loader .loading_1 {
position: relative;
width: 100%;
height: 10px;
border: 1px solid yellowgreen;
border-radius: 10px;
animation: turn 4s linear 1.75s infinite;
}
.loader .loading_1:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 100%;
background-color: yellowgreen;
box-shadow: 10px 0px 15px 0px yellowgreen;
animation: load 2s linear infinite;
}
.loader .loading_2 {
position: absolute;
width: 100%;
top: 10px;
color: green;
font-size: 22px;
text-align: center;
animation: bounce 2s linear infinite;
}
@keyframes load {
0% {
width: 0%;
}
87.5% {
width: 100%;
}
}
@keyframes turn {
0% {
transform: rotateY(0deg);
}
6.25%,
50% {
transform: rotateY(180deg);
}
56.25%,
100% {
transform: rotateY(360deg);
}
}
@keyframes bounce {
0%,
100% {
top: 10px;
}
12.5% {
top: 30px;
}
}
</style>
</head>
<body>
<div class="loader">
<div class="loading_1"></div>
<div class="loading_2">Loading GfG...</div>
</div>
</body>
</html>
Salida: La siguiente imagen muestra la barra de carga con animación.
Publicación traducida automáticamente
Artículo escrito por nehaahlawat y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA