Loadings são elementos importantes em interfaces web para informar aos usuários que uma ação está sendo processada. Eles podem ajudar a melhorar a experiência do usuário durante períodos de espera, fornecendo feedback visual e indicando que o sistema está trabalhando.
Neste artigo, vamos explorar como criar um loading simples utilizando apenas HTML e CSS.
Estrutura Básica HTML
Para começar, precisamos criar a estrutura básica do nosso documento HTML.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Loading com HTML e CSS</title>
</head>
<body>
<div class="loading-container">
<div class="loading"></div>
</div>
</body>
</html>
Esse código cria uma página HTML simples com um elemento <div>
para o loading. O elemento <div>
com a classe loading-container
é usado para centralizar o loading na página.
Estilizando com CSS
Agora, vamos criar o estilo para o loading utilizando CSS. Crie um arquivo chamado styles.css
e adicione o seguinte código:
CSS
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
}
.loading-container {
position: relative;
width: 50px;
height: 50px;
}
.loading {
position: absolute;
width: 100%;
height: 100%;
border: 4px solid #3498db;
border-radius: 50%;
border-top-color: transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Esse código define as propriedades visuais do loading, como a cor da borda, o tamanho e a animação.
Explicação do Código CSS
- body: Estiliza o corpo da página para centralizar o loading.
- loading-container: Cria um contêiner para o loading, permitindo controlar seu tamanho e posição.
- loading: Define as propriedades visuais do loading, como a borda e a animação de rotação usando a propriedade
@keyframes
.
Customizando o Loading
Você pode personalizar o loading alterando as cores, ajustando o tamanho ou experimentando diferentes animações. Por exemplo, você pode alterar as cores das bordas para se adequarem à paleta de cores do seu projeto.
Conclusão
Criar um loading com HTML e CSS é uma maneira eficiente e leve de fornecer feedback visual aos usuários durante operações assíncronas. Este tutorial fornece uma base sólida para criar loadings simples, mas você pode expandir e personalizar de acordo com as necessidades específicas do seu projeto. Experimente diferentes estilos e ajustes para melhor atender à estética e à usabilidade da sua aplicação web.