El cargador de cubos brillantes se puede crear usando HTML y CSS. Usaremos HTML para crear la estructura y algunas propiedades CSS.
El cargador es la parte de un sistema operativo que se encarga de cargar programas y bibliotecas. Es una de las etapas esenciales en el proceso de iniciar un programa, ya que coloca los programas en la memoria y los prepara para su ejecución. Así que crearemos un cargador circular usando propiedades HTML y CSS.
Código HTML: En esta sección, diseñaremos la estructura básica del código.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glowing cube loading</title> <link rel="stylesheet" href='style.css'> </head> <body> <h1>Loading GeeksforGeeks...</h1> <div class="loading"> <span></span> </div> </body> </html>
Código CSS: En esta sección, usaremos algunas propiedades CSS para diseñar un Cubo resplandeciente . 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. El cambio de estilo ocurrirá en porcentaje o con las palabras clave «desde» y «hasta», que es lo mismo que 0% y 100%. Podemos cambiar el conjunto de estilos CSS muchas veces.
La sintaxis para @keyframes es: @keyframes animationname {keyframes-selector {css-styles;}}
body{
background: black;
}
h1{
margin-top: 300px;
text-align: center;
color: darkgreen;
}
.loading{
width: 50px;
height: 50px;
margin: 100px auto;
position: relative;
}
.loading span{
display: block;
position: absolute;
bottom: 0;
background: yellowgreen;
width: 100%;
height: 100%;
border-radius: 10px;
animation: loading 1.5s infinite ease-in-out;
}
@keyframes loading{
0%{
transform: rotate(0deg);
background: yellow;
box-shadow: 0 0 10px black,
0 0 10px 5px green;
}
25%{
transform: rotate(80deg);
box-shadow: 0 0 10px #9966ff,
0 0 10px 5px black,
0 0 10px 5px yellow;
}
100%{
transform: rotate(0deg);
}
}
Código completo: es la combinación de las dos secciones de código anteriores, el código CSS se agrega internamente en el código HTML mediante el uso de la etiqueta de estilo .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Glowing cube loading</title>
<style>
body{
background: black;
}
h1{
margin-top: 300px;
text-align: center;
color: darkgreen;
}
.loading{
width: 50px;
height: 50px;
margin: 100px auto;
position: relative;
}
.loading span{
display: block;
position: absolute;
bottom: 0;
background: yellowgreen;
width: 100%;
height: 100%;
border-radius: 10px;
animation: loading 1.5s infinite ease-in-out;
}
@keyframes loading{
0%{
transform: rotate(0deg);
background: yellow;
box-shadow: 0 0 10px black,
0 0 10px 5px green;
}
25%{
transform: rotate(80deg);
box-shadow: 0 0 10px #9966ff,
0 0 10px 5px black,
0 0 10px 5px yellow;
}
100%{
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<h1>Loading GeeksforGeeks...</h1>
<div class="loading">
<span></span>
</div>
</body>
</html>
Producció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