Como fazer um carregador usando CSS

Ao usar qualquer aplicativo, às vezes você pode ter que esperar para visualizar o conteúdo até que ele seja carregado. Para isso, os carregadores em sites ou aplicativos permitem que o usuário espere ao exibir alguma animação. Em um site, esses carregadores indicam que o sistema não travou e o conteúdo será exibido depois de um tempo. Além disso, os carregadores animados fornecem uma aparência atraente que ajuda a manter a atenção do usuário no site.

Este artigo fornecerá instruções relacionadas à criação de um carregador usando CSS.

Como fazer carregador usar CSS?

Com o objetivo de criar um carregador, em primeiro lugar, em html, adicione um elemento div com o nome da classe “carregador”. Dentro deste elemento, coloque outro elemento div com o nome da classe “carregador-interno”.

Html

Agora, vá para a seção CSS, onde esses elementos serão estilizados para criar um carregador.

CSS

O estilo que vamos aplicar é mencionado abaixo.

Estilo todos os elementos

*
margem: 0;
preenchimento: 0;
Timing de caixa: caixa de fronteira;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

A explicação do código acima mencionado está listado abaixo:

• ““*”Símbolo de asterisk é usado para representar todos os tipos de elementos aos quais essas propriedades serão aplicadas.
• ““margem”A propriedade é utilizada para dar espaço ao redor de um elemento. O valor que "0”Significa que não haveria margem em torno de cada elemento HTML.
• ““preenchimento”Propriedade especifica o espaço em torno do conteúdo do elemento.
• ““tamanho de caixa”Propriedade com o valor“Border-box”Indique que a fronteira e o preenchimento estão incluídos na altura e na largura.
• ““família de fontes”Define a fonte do elemento.

Elemento de "corpo" de estilo

corpo
Altura: 100VH;
cor de fundo: RGB (53, 53, 53);

As propriedades aplicadas ao elemento corporal são dadas abaixo:

• ““altura”A propriedade é utilizada para definir a altura do corpo. A unidade "vh”Representa que inicialmente, o elemento corporal leva 100% da altura da viewport.
• ““cor de fundo”Propriedade define a cor de fundo do corpo.

Estilo “carregador” div

.carregador
Posição: Absoluto;
TOP: 50%;
Esquerda: 50%;
Animação: Infinito linear de carregamento de girador de 400ms;

A descrição das propriedades aplicadas ao carregador Div de HTML é dada abaixo:

• ““posição”Propriedade com o valor“absoluto”Colocará o elemento carregador em relação aos seus pais.
• ““principal”Propriedade define a posição vertical da div.
• ““esquerda”Propriedade define a posição horizontal da div.
• ““animação”É uma propriedade abreviada que define o nome da animação, duração da animação, função de tempo de animação e atraso de animação para o carregador.

Observação: O "Carregando Spinner”É o nome da animação, que será utilizado na animação @keyframes para especificar a animação.

Div "Inner-Inner" de estilo

.carregador .Inador de carregador
Largura: 60px;
Altura: 60px;
borda: 10px transparente sólido;
cor-top-top: #00C8B1;
cor de borda-esquerda: #00C8B1;
Radio de fronteira: 50%;

A divisão da criança do carregador, tendo o nome “carregador-interno”É aplicado com propriedades descritas abaixo:

• ““largura”Propriedade define a largura do elemento.
• ““altura”Propriedade define a altura do elemento.
• ““fronteira”Especifica uma borda com largura, tipo de linha e cor.
• ““Color de borda”Adiciona cor ao topo da fronteira.
• ““Color de borda-esquerda”Adiciona cor à esquerda da fronteira.
• ““Radio de fronteira”Especifica o raio da fronteira e faz com que.

O carregador é criado com sucesso e ficará assim:

Vamos definir os quadros-chave de animação do carregador criado acima.

Defina os quadros -chave de animação

@KeyFrames Loading-spinner
0%
Transformar: girar (0deg);

100%
Transformar: girar (360deg);

Os quadros -chave no CSS definem a animação definindo seu estilo em diferentes duração:

• ““@KeyFrames Loading-spinner”: O nome da animação“Carregando Spinner”Seguido pela palavra -chave @KeyFrames é usado para definir a animação.
• ““0%”Representa a animação no início em que o carregador será girado“0" grau.
• ““100%”Representa a animação no final enquanto gira o carregador em“360”Graus.

Observação: O nome da animação é especificado no Div do carregador-interno.

Saída

Legal! Criamos com sucesso um carregador animado com CSS.

Conclusão

Nos sites, os carregadores adicionados para atingir a atenção do usuário até que o conteúdo seja carregado. Existem várias propriedades CSS utilizadas para fazer carregadores, como “animação”E definir os quadros da chave de animação usando o“transformar" propriedade. Este artigo era sobre fazer um carregador CSS e aplicar animação a ele.