En este artículo, aprenderemos cómo configurar el logotipo dentro del cargador usando CSS.
Un cargador es cualquier animación que alerta al visitante/usuario sobre la página actual que se está cargando en ese momento, y tendrá que esperar unos segundos para que se cargue por completo. Los cargadores generalmente son útiles cuando un sitio web tarda demasiado en obtener los resultados, en lugar de dar la impresión de que el sitio no responde, muestra una animación simple de que el sitio aún está obteniendo resultados y la página web estará lista en unos segundos.
Para saber cómo agregar la clase de cargador en CSS, puede consultar los siguientes artículos.
Agregar el logotipo de la empresa dentro del cargador brinda un toque personal al usuario y es una práctica común en lugar de cargadores sencillos.
- Crearemos un archivo HTML en el que agregaremos un div HTML dentro del cuerpo para agregar nuestro cargador en él.
- Creamos un archivo CSS para darle efectos de animación a nuestro logo y al cargador.
- Vinculamos el archivo CSS a nuestro documento HTML con una etiqueta <link> o podemos colocar los contenidos CSS directamente en el archivo HTML usando la etiqueta <style>.
- Dentro de la etiqueta div , inserte el logotipo usando la etiqueta <img> , de modo que ahora nuestro logotipo aparezca dentro de nuestra clase de cargador .
index.html
<!DOCTYPE html> <html lang="en"> <head> <!-- We can use the style tag and place the CSS content inside it --> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210610212340/gfglogo.png" /> </div> </body> </html>
En esta sección se define el estilo de nuestro documento para que se vea atractivo y aquí se agregan todas las animaciones.
La creación de nuestro archivo CSS seguirá los siguientes pasos.
- Agregar propiedades de clase de cargador
- Add suitable border size, color, radius, height, width, etc according to the style of the loader you want to make.
- For the animation part, we will use the @keyframes rule that allows the animation to gradually change from the current style to the new style at certain time intervals.
- Then finally we will use the CSS Transform property to rotate the animation 360 degrees in a clockwise direction.
- Add logo class properties
- In CSS file, we refer to our logo as “.loader img” since we declared the image tag inside the div tag containing the loader class.
- We define the height and width of the logo (preferably lesser than or equal to loader class) so it stays inside the loader.
- Finally, we add a keyframe and animation property same as in loader but instead of rotating it clockwise we rotate it anticlockwise to create an effect that it is actually fixed rather than rotating with the loader.
Nota: tenemos que girar el logotipo en la dirección opuesta porque hemos definido el logotipo dentro de la clase del cargador y todas las propiedades definidas en la clase del cargador también se aplican al logotipo y, por lo tanto, para anular el efecto de la rotación, giramos el logotipo en un sentido contrario a las agujas del reloj, por lo que el logotipo aparece estacionario.
style.css
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #048023; /* Dark Green */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spinloader 2s linear infinite;
}
.loader img{
height : 120px;
width : 120px;
animation: spinlogo 2s linear infinite;
}
@keyframes spinloader {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spinlogo {
0% { transform: rotate(360deg); }
100% { transform: rotate(0deg); }
}
Código completo: en esta sección, combinaremos las dos secciones anteriores de códigos, es decir, códigos HTML y CSS.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
.loader {
border: 16px solid #f3f3f3;
/* Light grey */
border-top: 16px solid #048023;
/* Dark Green */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spinloader 2s linear infinite;
}
.loader img {
height: 120px;
width: 120px;
animation: spinlogo 2s linear infinite;
}
@keyframes spinloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spinlogo {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="loader">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210610212340/gfglogo.png" />
</div>
</body>
</html>
Publicación traducida automáticamente
Artículo escrito por devashish_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA