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.
[continuar lendo]

Cortina (overlay) de Loading usando apenas CSS

Neste momento estou trabalhando em um projeto migrando para HTML a parte em Silverlight de um dos produtos da empresa onde trabalho. Esse designer se comunica com a aplicação por meio de web apis, que podem demorar um pouco para responder dependendo do volume de dados e carga do servidor.

Depois de ter trabalhado alguns anos em uma agência eu aderi à filosofia de que código HTML deve ter relevância semântica sempre que for possível, evitando a inclusão de atributos e tags desnecessários ao máximo. Com isso você acaba com um código mais limpo, menor, mais fácil de dar manutenção, mais fácil de alterar visualmente no futuro via css e mais leve de processar no browser.

Quando a aplicação fizer uma chamada para a api que demorar um pouco, eu precisava exibir uma tela de “loading”, mas eu queria fazer isso da forma mais limpa possível. Graças ao pseudo-seletor de css ::after, que eu adoro, eu fui capaz de criar essa tela usando apenas CSS, sem acrescentar nenhuma tag no HTML.

Exemplo da cortina de loading com animação

[continuar lendo]
Tags: CSS HTML5

Build 2015 – Build Tour São Paulo

Build 2015 - São Paulo

A conferência Build é o meu evento técnico preferido, desde que a Microsoft extinguiu o MIX em 2011, mas infelizmente eu não irei para o Build em São Francisco esse ano. Por um lado essa é até uma boa notícia, com a cotação do dollar do jeito que está, mas não tem preço a oportunidade de interagir diretamente com o pessoal da Microsoft e outros profissionais, além de rever velhos amigos, conhecidos e MVPs do mundo todo com quem normalmente interajo apenas por redes sociais e e-mails.

[continuar lendo]