Como fazer spinners simples CSS?

No desenvolvimento da web, um spinner pode ser utilizado com o objetivo de mostrar o estado de carregamento da página da web ou um projeto. Ele pode ser simplesmente projetado através de propriedades HTML e CSS. Além disso, pode não exigir regras rígidas e rápidas, como a utilização de JavaScript e outras linguagens de programação. Para fazer isso, o CSS “Radio de fronteira”A propriedade pode ser usada.

Este post indicará como projetar um spinner simples CSS.

Como fazer spinners simples CSS?

Para fazer um spinner CSS simples, primeiro, crie um recipiente de div e depois aplique o “Radio de fronteira" propriedade. Depois disso, aplique as propriedades CSS específicas, incluindo “animação","Radio de fronteira","transformar", e outros.

Para implicações práticas, experimente as etapas fornecidas.

Etapa 1: faça um contêiner div

Inicialmente, faça um contêiner de div com a ajuda do “" elemento. Além disso, insira um “aula”Atributo com um nome específico:

Etapa 2: Faça o spinner simples

Acesse o contêiner criado com a ajuda do nome da classe e aplique as propriedades CSS abaixo:

.Spin-container :: antes
Animação: 1.9em;
Animação-Play-State: Herit;
Border: Solid 5px #C2DFFC;
margem: 10%;
Radio de fronteira: 50%;
cor-cor de fronteira: #064E18;
Transform: tradutor3d (-50%,-50%, 0);
contente: "";
Altura: 100px;
Largura: 100px;
Posição: Absoluto;
TOP: 40%;
Esquerda: 40%;
Will-muda: transform;

Aqui:

• • ““animação”É uma propriedade CSS abreviada utilizada para aplicar uma animação entre os estilos.
  • ““Animação-Play-State”Determina se a animação está em um estado de corrida ou parado.
  • ““fronteira”Propriedade define um limite em torno de um elemento específico.
  • ““margem”Define um espaço fora do limite definido.
  • ““Radio de fronteira”Especifica o raio dos cantos do elemento.
  • ““cor-cor de fronteira”É utilizado para definir a cor no lado inferior do limite definido.
  • ““transformar”Transforma um elemento de maneira 2D ou 3D. Esta propriedade permite que seus usuários escalem, distorçam, movam e gire os elementos.
  • ““contente”É usado para inserir o texto dentro do elemento.
  • ““altura" e "largura”As propriedades são usadas para especificar o tamanho do elemento.
  • ““posição”Especifica o tipo de método de posicionamento do elemento.
  • ““principal" e "esquerda”Propriedades alocam a posição do elemento.
  • ““vai mudar”Dicas para os navegadores sobre como um elemento pode mudar.

Pode -se observar que o simples girador foi criado e projetado com sucesso:

Isso se trata de criar e estilizar um spinner simples CSS.

Conclusão

Para fazer o simples giratório CSS, primeiro, projetar um contêiner de div. Em seguida, aplique as propriedades CSS específicas, incluindo “animação","Radio de fronteira","transformar","Radio de fronteira","cor-cor de fronteira", e outros. Este post demonstrou o método para projetar o spinner simples do CSS.