Bom estou usando uma progress-bar sempre que estou carregando algum dado na página. Para ficar legal eu estou tentando colocar um efeito para quando ela aparecer e sumir.
Porém o efeito só funciona quando ele é ocultada, como faço para o efeito ser aplicado quando ele aparecer?
Class da progress-bar loader-overlay
;
Class que oculta a progress-bar loader-hidden
;
Código css:
.loader-hidden {
position: absolute;
width:100%;
z-index: 500000;
transform: scaleY(0);
transform-origin: top;
transition: transform 0.26s ease;
}
.loader-overlay {
position: absolute;
width:100%;
z-index: 500000;
transform: scaleY(1);
transform-origin: top;
transition: transform 0.26s ease;
}
Código html:
<div [class.loader-hidden]="!show">
<div class="loader-overlay">
<div>
<md-progress-bar color="accent" mode="indeterminate"></md-progress-bar>
</div>
</div>
</div>