Skip to content

Side project com o intuito de aprender essa nova forma de "Loading" muito utilizada ultimamente. 🚀🚀

Notifications You must be signed in to change notification settings

joaopedrorc/linkedin-clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

LinkedIn Clone - Shimmering Effect

Made by DanielObara GitHub last commit

smartmockups_kfvk7oby

ℹ️ O que é o Shimmer Effect ?

Há algum tempo o Facebook criou uma forma inusitada para indicar o carregamento de suas páginas, o chamado Shimmer Effect, que nada mais é que a exibição de um esqueleto da página em forma de animação no lugar de um Spinner ou uma Barra de Progresso

Shimmer Effect em ação

Screen Recording 2020-08-29 at 19 20 13

Vantagens ao usá-lo:

O Shimmer Effect é uma alternativa muito efetiva em relação ao loading tradicional pois permite que sejam criadas Skeletons Screens, que são as páginas onde enquanto o conteúdo é carregado de modo assíncrono o Shimmer está aparecendo, e ele dá um feedback bacana para o usuário, trazendo as seguintes vantagens:

  • Faz com que o usuário perceba que a página/tela carrega rápido;
  • Acaba com a surpresa sobre a interface;
  • Carregamento gradual da interface;
  • Indicação clara de progresso;
  • Mostra exatamente o que já foi carregado e o que ainda tem para carregar.

Skeletons Screens

Screen Recording 2020-08-29 at 19 15 04

Projeto funcional pelo Netlify

🚀 Tecnologias

Esse projeto foi desenvolvido usando as seguintes tecnologias:

Para fazer uma cópia dessa aplicação, você precisará Git, Node.js + npm (npm é baixado com o Node.js) instalados no seu computador.

Pelo Seu Terminal:

Instalar

# Clone this repository
$ git clone https://github.com/jotape02/linkedin-clone

# Go into the repository
$ cd linkedin-clone

# Install dependencies
$ yarn install

# Run
$ yarn start

# running on port 3000

🤔 Como contribuir

  • Faça um fork desse repositório;
  • Cria uma branch com a sua feature: git checkout -b minha-feature;
  • Faça commit das suas alterações: git commit -m 'feat: Minha nova feature';
  • Faça push para a sua branch: git push origin minha-feature.

Depois que o merge da sua pull request for feito, você pode deletar a sua branch.

About

Side project com o intuito de aprender essa nova forma de "Loading" muito utilizada ultimamente. 🚀🚀

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published