Carregadores

Disponibilizamos dois tipos de carregadores (loaders), um para fundos escuros e outro para fundos claros. Este elemento é utilizado para informar o cidadão de que o pedido efetuado (por exemplo no processo de requisição de um serviço está a ser processado.

a carregar

Código
Ocultar Código
  • HTML
  • CSS

<div class="loaders-wrapper">
    <div class="loader-box type1"><img src="http://localhost:8080/documents/20181/22727/loader1.gif/1fe705c3-f437-41b9-a069-476c1a3ca346?t=1484818935615" />
        <p>a carregar</p>
    </div>
</div>

.loader-box{
    padding: 30px;
    text-align: center;    
}
.loader-box i{
    font-size: 0px;
}
.loader-box i:before{
    font-size: 65px;
}
.loader-box p{
    font-family: "latobold_italic";
    font-size: 22px;
    margin-top: 20px;
}
.loader-box.type1{
    background: #2A2A2A;
    color: #fff;
}
.loader-box.type2{
    background: #F1F1F2;
    color: #2A2A2A;
}

a carregar

Código
Ocultar Código
  • HTML
  • CSS
<div class="loaders-wrapper">
    <div class="loader-box type2">
        <img src="http://localhost:8080/documents/20181/22727/loader2.gif/745eb62e-5113-4550-a10f-75479a0808c2?t=1484818946255"/>
        <p>a carregar</p>
    </div>
</div>
.loader-box{
    padding: 30px;
    text-align: center;    
}
.loader-box i{
    font-size: 0px;
}
.loader-box i:before{
    font-size: 65px;
}
.loader-box p{
    font-family: "latobold_italic";
    font-size: 22px;
    margin-top: 20px;
}
.loader-box.type1{
    background: #2A2A2A;
    color: #fff;
}
.loader-box.type2{
    background: #F1F1F2;
    color: #2A2A2A;
}