24 agosto, 2016

Cortina (overlay) de Loading usando CSS, v2

Em outubro eu fiz um post mostrando como criar e usar uma cortina de loading usando CSS. Uma coisa muito boa daquela abordagem é que sua implementação não depende de nenhum markup html extra nas páginas. O visual é criado 100% em CSS e para usar basta acrescentar o class “loading” no body da página usando um javascript bem simples.

Desde então o projeto onde usei esse loading evoluiu e eu fiz algumas melhorias naquela implementação:

  • O loading antes funcionava apenas no body da página, agora funciona em elementos individuais também (div, por exemplo)
  • O loading não é mais imediato, passando a aparecer de forma gradual apenas após 1.2s da solicitação, assim se o processamento for muito rápido o overlay não aparece. Além disso a apresentação gradual do loading é mais agradável visualmente.
  • O loading agora protege a página/elemento contra cliques, assim o usuário não conseguirá clicar novamente em botões ou elementos da página enquanto o loading estiver definido, mesmo dentro do período de 1.2s descrito acima.