🥇 Última tendência da IU da web: barras de carregamento de Ajax

Ao carregar conteúdo por meio de navegadores ajax, geralmente não fornecem uma indicação clara de que estão buscando conteúdo adicional. Isso normalmente é encontrado em sites de rolagem infinita, no entanto, a tendência mais recente da interface do usuário, conforme vista no Medium e no Youtube, é uma barra de carregamento animada superior ao buscar conteúdo adicional. Aqui está uma captura de tela do exemplo do meio:

Então, como eles fazem isso?

Bem, vamos começar com alguns HTML / CSS básicos. Ao usar ferramentas de desenvolvedor no Chrome na página, percebi que eles continuavam adicionando uma classe à tag do corpo:

app-loading

Então, adicionei a classe manualmente e a barra de carregamento apareceu e permaneceu no lugar. Ainda usando as ferramentas do desenvolvedor, encontrei o div que formava a barra de carregamento na parte inferior do html, logo acima das tags de fechamento do script. aqui está o HTML que compõe a barra de carregamento:

<div class="loading-bar"></div>

Super simples até agora, agora o CSS, por padrão o estilo aplicado é:

.loading-bar
{
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 800;
    background: #60d778;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
}

Observe a exibição: nenhum; Isso oculta a barra da vista inicialmente. Quando continuamos a examinar o CSS, vemos que a classe de carregamento do aplicativo substitui esta exibição padrão: nenhum.

.app-loading .loading-bar
{
    display: block;
    -webkit-animation: shift-rightwards 1s ease-in-out infinite;
    -moz-animation: shift-rightwards 1s ease-in-out infinite;
    -ms-animation: shift-rightwards 1s ease-in-out infinite;
    -o-animation: shift-rightwards 1s ease-in-out infinite;
    animation: shift-rightwards 1s ease-in-out infinite;
    -webkit-animation-delay: .4s;
    -moz-animation-delay: .4s;
    -o-animation-delay: .4s;
    animation-delay: .4s;
}

Portanto, ao adicionar a classe de carregamento do aplicativo ao corpo enquanto carrega o conteúdo na página, você obtém efetivamente uma barra de carregamento animada fixada no topo da página.

O último exemplo de código é a animação CSS3 que “sequestramos” do Medium, eles a chamaram: shift-rightwards, então vamos dar a esse desenvolvedor o crédito e manter o nome na demonstração.

@-webkit-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-moz-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@-o-keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }

}
@keyframes shift-rightwards
{
    0%
    {
        -webkit-transform:translateX(-100%);
        -moz-transform:translateX(-100%);
        -o-transform:translateX(-100%);
        transform:translateX(-100%);
    }

    40%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    60%
    {
        -webkit-transform:translateX(0%);
        -moz-transform:translateX(0%);
        -o-transform:translateX(0%);
        transform:translateX(0%);
    }

    100%
    {
        -webkit-transform:translateX(100%);
        -moz-transform:translateX(100%);
        -o-transform:translateX(100%);
        transform:translateX(100%);
    }
}

Fácil, então como podemos aplicar isso aos nossos próprios sites?

Antes de fazer uma solicitação ajax, adicione o carregamento do aplicativo de classe à tag <body />.
Após a conclusão do ajax (certifique-se também de detectar o tempo limite ou erro), remova a classe da tag body.

Exemplo completo de trabalho usando jQuery:

http://codepen.io/artfulhacker/pen/hikJd

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading Bar Sample</title>
<style>
.app-loading .loading-bar
{
 display: block;
 -webkit-animation: shift-rightwards 1s ease-in-out infinite;
 -moz-animation: shift-rightwards 1s ease-in-out infinite;
 -ms-animation: shift-rightwards 1s ease-in-out infinite;
 -o-animation: shift-rightwards 1s ease-in-out infinite;
 animation: shift-rightwards 1s ease-in-out infinite;
 -webkit-animation-delay: .4s;
 -moz-animation-delay: .4s;
 -o-animation-delay: .4s;
 animation-delay: .4s;
}
.loading-bar
{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 right: 0;
 height: 2px;
 z-index: 800;
 background: #60d778;
 -webkit-transform: translateX(100%);
 -moz-transform: translateX(100%);
 -o-transform: translateX(100%);
 transform: translateX(100%);
}

@-webkit-keyframes shift-rightwards
{
 0%
 {
 -webkit-transform:translateX(-100%);
 -moz-transform:translateX(-100%);
 -o-transform:translateX(-100%);
 transform:translateX(-100%);
 }

 40%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 60%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 100%
 {
 -webkit-transform:translateX(100%);
 -moz-transform:translateX(100%);
 -o-transform:translateX(100%);
 transform:translateX(100%);
 }

}
@-moz-keyframes shift-rightwards
{
 0%
 {
 -webkit-transform:translateX(-100%);
 -moz-transform:translateX(-100%);
 -o-transform:translateX(-100%);
 transform:translateX(-100%);
 }

 40%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 60%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 100%
 {
 -webkit-transform:translateX(100%);
 -moz-transform:translateX(100%);
 -o-transform:translateX(100%);
 transform:translateX(100%);
 }

}
@-o-keyframes shift-rightwards
{
 0%
 {
 -webkit-transform:translateX(-100%);
 -moz-transform:translateX(-100%);
 -o-transform:translateX(-100%);
 transform:translateX(-100%);
 }

 40%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 60%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 100%
 {
 -webkit-transform:translateX(100%);
 -moz-transform:translateX(100%);
 -o-transform:translateX(100%);
 transform:translateX(100%);
 }

}
@keyframes shift-rightwards
{
 0%
 {
 -webkit-transform:translateX(-100%);
 -moz-transform:translateX(-100%);
 -o-transform:translateX(-100%);
 transform:translateX(-100%);
 }

 40%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0%);
 transform:translateX(0%);
 }

 60%
 {
 -webkit-transform:translateX(0%);
 -moz-transform:translateX(0%);
 -o-transform:translateX(0

Related Posts

`Related Posts`