Physical Address
Santo Domingo Este, República Dominicana.
Crea un Loading Spinner en HTML & CSS
Cuando hace clic en el sitio web o la aplicación de alguien, es posible que haya visto el indicador de carga, más conocido como Loading Spinner. Si está buscando una forma rápida y sencilla de crear un indicador de carga, este blog está escrito para usted.
Este blog le enseñará a crear un Loading Spinner utilizando solo HTML y CSS. Los indicadores de carga se utilizan en muchas aplicaciones y sitios web. Por lo general, este tipo de animación aparece cuando se carga una página web. En mi reciente publicación de blog, proporcioné más de 16 plantillas de inicio de sesión y registro que podrían resultarle útiles.
Los loading spinner se utilizan para recuperar datos o realizar cálculos lentos. Notifican al usuario que su solicitud se está procesando. Para mantener a sus visitantes y observadores de contenido interesados mientras se carga el contenido de la página, puede utilizar indicadores de carga.
Eche un vistazo a la imagen del indicador de carga. Como puede ver en el indicador de carga, hay un fondo de color liso y un indicador. Este cargador gira 360 grados de manera indefinida y suave.
He explicado todo el código HTML y CSS que he usado para crear este CSS Loading Spinner. Además, si quieres hacer este CSS Loader conmigo paso a paso, puedes ver el vídeo tutorial que he dado a continuación.
Cómo crear un Loading Spinner en HTML y CSS | Video tutorial
Se proporciona todo el código HTML y CSS que utilicé para crear esta animación flotante. En lugar de duplicar el código o descargar el archivo de código fuente, le recomiendo encarecidamente que vea la explicación completa en video de esta animación flotante del menú de navegación. Al ver el video tutorial, puede crear esta animación flotante del menú de navegación.
Como ha visto en el video tutorial de este Loading Spinner, este tipo de carga es mucho más atractivo y mejora la satisfacción del usuario.
Espero que ahora pueda crear este Loading Spinner en HTML y CSS. Si desea utilizar todo el código HTML y CSS que he utilizado para crear este CSS Loader, a continuación se proporcionan todos los códigos fuente.
Loading Spinner con HTML CSS [Código Fuente]
Para crear CSS Loader Spinner, siga los pasos que se indican línea por línea:
- Cree una carpeta. Puede nombrar esta carpeta como desee y, dentro de ella, cree los archivos mencionados.
- Cree un archivo index.html. El nombre del archivo debe ser index y su extensión .html
- Cree un archivo style.css. El nombre del archivo debe ser style y su extensión .css
- Cree un archivo script.js. El nombre del archivo debe ser script y su extensión .js
Una vez que cree estos archivos, pegue los códigos indicados en los archivos especificados. Si no desea realizar estas acciones, desplácese hacia abajo y descargue Loading Spinner haciendo clic en el botón de descarga indicado.
Primero, pegue los siguientes códigos en su archivo index.html.
HTML
<!DOCTYPE html>
<!-- Coding By Yodeimi Gomez- yodeimigomez.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Loading Spinner | YodeimiGomez.com </title>
<!---Custom Css File!--->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="spinner"></div>
</div>
</body>
</html>En segundo lugar, pegue los siguientes códigos en su archivo style.css.
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container{
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4285f4;
}
.spinner{
width: 80px;
height: 80px;
border: 7px solid #fff;
border-top-color: transparent;
border-radius: 50%;
animation: spinner 0.7s linear infinite;
}
@keyframes spinner{
from{}
to{
transform: rotate(360deg);
}
}Eso es todo, ahora has creado con éxito un proyecto en CSS Loading Spinner. Si tu código no funciona o has tenido algún problema, descarga los archivos de código fuente desde el botón de descarga indicado. Es gratis y se descargará un archivo zip que contiene la carpeta del proyecto con los archivos de código fuente.
