Tenho um <mat-divider></mat-divider>
e preciso fazer com que ele seja revelado da esquerda para a direita, como se fosse uma barra de progresso sendo preenchida
Alguém tem algum exemplo para me apresentar? Só consegui encontrar com javascript
@Edit:
Adicionando exemplo:
@-moz-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
@-webkit-keyframes roll {
0% { width:0; }
100% { width:100%; }
}
.multi-steps > li.is-active:before, .multi-steps > li.is-active ~ li:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active:after, .multi-steps > li.is-active ~ li:after {
background-color: #ededed;
}
.multi-steps > li.is-active-acao-lojista:before, .multi-steps > li.is-active-acao-lojista ~ li:before {
content: counter(stepNum);
font-family: inherit;
font-weight: 700;
}
.multi-steps > li.is-active-acao-lojista:after, .multi-steps > li.is-active-acao-lojista ~ li:after {
background-color: #ededed;
}
.multi-steps {
display: table;
table-layout: fixed;
width: 100%;
}
.multi-steps > li {
counter-increment: stepNum;
text-align: center;
display: table-cell;
position: relative;
color: #a1c642;
z-index:99!important;
}
.multi-steps > li.is-active {
color: #a1c642!important;
}
.multi-steps > li.is-active-acao-lojista {
color: darkorange!important;
}
.multi-steps > li:before {
content: '\f00c';
content: '\2713;';
content: '\10003';
content: '\10004';
content: '\2713';
display: block;
margin: 0 auto 4px;
background-color: #fff;
width: 36px;
height: 36px;
line-height: 32px;
text-align: center;
font-weight: bold;
border-width: 2px;
border-style: solid;
border-color: #a1c642;
border-radius: 50%;
}
.multi-steps > li:after {
content: '';
height: 2px;
width: 100%;
background-color: #a1c642;
position: absolute;
top: 16px;
left: 50%;
z-index: -1;
}
.multi-steps > li:last-child:after {
display: none;
}
.multi-steps > li.is-active-acao-lojista:before {
background-color: #fff;
border-color: darkorange;
}
.multi-steps > li.is-active:before {
background-color: #fff;
border-color: #a1c642;;
}
.multi-steps > li.is-active ~ li {
color: #808080;
}
.multi-steps > li.is-active ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
.multi-steps > li.is-active-acao-lojista ~ li {
color: #808080;
}
.multi-steps > li.is-active-acao-lojista ~ li:before {
background-color: #ededed;
border-color: #ededed;
}
<ul class="list-unstyled multi-steps">
<li>Pedido recebido</li>
<li [class.is-active]="pedido.status == 'book_product' && pedido.id_Nota_fiscal == null">Pagamento aprovado</li>
<li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal == null">Faturar pedido</li>
<li [class.is-active-acao-lojista]="pedido.status == 'payment_received' && pedido.id_Nota_fiscal !== null">Enviar dados rastreio</li>
<li>Confirmar entrega</li>
</ul>
Eu preciso aplicar a animação roll no ultimo elemento li:after que possui o background-color #a1c642
Tentei:
.multi-steps > li:after:last-child{
animation-name: roll;
animation-duration: 5s;
animation-timing-function: linear;
}
mas nada acontece