O que vamos construir?

Vamos criar uma animação de carregamento usando uma classe CSS que você pode aplicar a praticamente qualquer elemento que desejar (dentro do motivo).

Isso oferece uma grande flexibilidade para usá-lo e torna a solução agradável e simples, apenas com CSS.

Embora o snippet seja bem pequeno e você possa copiá-lo e colá-lo, mostrarei o que está acontecendo e um exemplo de como usá-lo dinamicamente ao carregar dados.

Só quer o trecho?

Você pode pegá-lo aqui!

Animação de carregamento de CSS

Animação de carregamento CSS. GitHub Gist: compartilhe instantaneamente código, notas e trechos.

Preciso saber como animar antes deste tutorial?

Não! Analisaremos detalhadamente exatamente o que você precisa fazer. De fato, a animação neste tutorial é relativamente simples, então vamos nos aprofundar!

Parte 1: Criando nossa animação de carregamento

Esta primeira parte será focada em reunir a animação de carregamento e visualizá-la em um site HTML estático. O objetivo é seguir realmente criando o snippet. Usaremos apenas HTML e CSS para esta parte.

Etapa 1: Criando um Conteúdo de Amostra

Para começar, queremos um pequeno exemplo de conteúdo. Realmente não há restrições aqui, você pode criar isso com HTML e CSS básico ou pode adicioná-lo ao seu aplicativo Create React!

Para o passo a passo, usarei HTML e CSS com alguns exemplos de conteúdo que nos permitirão ver isso com efeito.

Para começar, crie um novo arquivo HTML. Dentro desse arquivo HTML, preencha-o com algum conteúdo que nos permita jogar com nossa animação. Eu vou usar fillerama que usa linhas do meu programa de TV favorito Futurama!

Se você vai acompanhar comigo, aqui está a aparência do meu projeto:

my-css-loading-animation-static- index.html- main.css

Siga junto com o commit!

Etapa 2: começando com uma classe de carregamento de base

Para nossa base, vamos criar uma nova classe CSS. Dentro do nosso arquivo CSS, vamos adicionar:

.loading {  background: #eceff1;}

Com essa classe, vamos adicioná-la a alguns ou todos os nossos elementos. Adicionei-o a alguns parágrafos, títulos e listas.

For example...

Isso nos dá um pano de fundo básico, mas provavelmente queremos ocultar esse texto. Quando estiver carregando, ainda não teremos esse texto; portanto, é mais provável que desejemos usar texto de preenchimento ou uma altura fixa. De qualquer forma, podemos definir a cor como transparente:

.loading {  color: transparent;  background: #eceff1;}

Se você observar os elementos da lista, se aplica a classe ao elemento da lista de nível superior (

ou
) vs o próprio item da lista (
• ), parece um grande bloco. Se adicionarmos uma pequena margem na parte inferior de todos os elementos da lista, podemos ver uma maneira diferente de como eles são exibidos:

  li {  margin-bottom: .5em;}

  

  E agora está começando a se reunir, mas meio que parece um espaço reservado. Então, vamos animar isso para parecer que ele está realmente carregando.

  Siga junto com o commit!

  Etapa 3: Modelando e animando nossa classe de carregamento

  Antes de realmente animar nossa classe, precisamos de algo para animar, então vamos adicionar um gradiente ao nosso .loading classe:

  .loading {  color: transparent;  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);}

  Isto está dizendo que queremos um Gradiente linear inclinado a 100 graus, onde começamos com #eceff1 e desaparecer para #f6f7f8 a 30% e de volta a #eceff1 a 70%;

  

  É difícil ver inicialmente quando está parado; pode parecer um brilho no seu computador! Se você quiser vê-lo antes de prosseguir, sinta-se à vontade para brincar com as cores acima e ver o gradiente.

  Agora que temos algo para animar, primeiro precisamos criar um quadros-chave regra:

  @keyframes loading {  0% {    background-position: 100% 50%;  }  100% {    background-position: 0 50%;  }}

  Essa regra, quando aplicada, alterará a posição do plano de fundo de começar em 100% do eixo x para 0% do eixo x.

  Com a regra, podemos adicionar nosso animação propriedade para o nosso .loading classe:

  .loading {  color: transparent;  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);  animation: loading 1.2s ease-in-out infinite;}

  Nossa linha de animação está definindo o quadro-chave como loading, dizendo para durar 1,2 segundos, configurando o função de temporização para ease-in-out para torná-lo suave e diga para repetir para sempre infinite.

  

  Se você notar que, depois de salvar isso, ainda não está fazendo nada. A razão para isso é que estamos definindo nosso gradiente de uma extremidade do elemento DOM para a outra, então não há para onde mover!

  Então, vamos tentar também definir um background-size no nosso .loading classe.

  .loading {  color: transparent;  background: linear-gradient(100deg, #eceff1 30%, #f6f7f8 50%, #eceff1 70%);  background-size: 400%;  animation: loading 1.2s ease-in-out infinite;}

  Agora, como nosso plano de fundo se expande além do elemento DOM (você não pode ver essa parte), ele tem algum espaço para animar e obtemos nossa animação!

  

  Siga junto com o commit!

  Parte 2: usando nossa animação de carregamento em um aplicativo dinâmico

  Agora que temos nossa animação de carregamento, vamos colocá-la em ação com um exemplo básico em que fingimos um estado de carregamento.

  O truque para realmente usar isso é que normalmente não temos o conteúdo real disponível; portanto, na maioria dos casos, precisamos fingir.

  Para mostrar como podemos fazer isso, vamos criar um simples Reagir aplicativo com Next.js.

  Etapa 1: Criando um aplicativo React de exemplo com o Next.js

  Navegue para o diretório em que deseja criar seu novo projeto e execute:

  yarn create next-app# ornpm init next-app

  Ele solicitará algumas opções, particularmente um nome que determinará o diretório em que o projeto foi criado e o tipo de projeto. estou a usar my-css-loading-animation-dynamic e o “Aplicativo Padrão para Iniciantes”.

  

  Depois de instalado, navegue para o seu novo diretório e inicie o servidor de desenvolvimento:

  cd [directory]yarn dev# or npm run dev

  

  Em seguida, vamos substituir o conteúdo em nossa pages/index.js Arquivo. Vou derivar o conteúdo do exemplo anterior, mas vamos criá-lo de maneira semelhante à que podemos esperar de uma API. Primeiro, vamos adicionar nosso conteúdo como um objeto acima da nossa declaração de retorno:

  const content = {  header: `So, how 'bout them Knicks?`,  intro: `What are their names? I'm Santa Claus! This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry! Good news, everyone! I've taught the toaster to feel love!`,  list: [    `Yes! In your face, Gandhi!`,    `So I really am important? How I feel when I'm drunk is correct?`,    `Who are those horrible orange men?`  ]}

  Para exibir esse conteúdo, dentro

  , vamos substituir o conteúdo por:

    
  { content.header }
    
  { content.intro }
    
      { content.list.map((item, i) => {      return (        
  { item }
        )    })}  

  E para os estilos, você pode copiar e colar tudo da nossa Parte 1 main.css arquivo no

  Prévia do ícone do site

  Como um ícone de aplicativo e um ícone no navegador.

  

  

  <# print( 'Cibersistemas.pt' ) #>