domino-ui
domino-ui copied to clipboard
Progressbar animation from material design
Hi. Can I ask for implementing progresbar animation: https://material.io/components/progress-indicators
I have css for that:
.slider{
position:relative;
width:100%;
height:5px;
overflow-x: hidden;
}
.line{
position:absolute;
opacity: 0.4;
background:#1562AD;
width:150%;
height:5px;
}
.subline{
position:absolute;
background:#1562AD;
height:5px;
}
.inc{
animation: increase 2s infinite;
}
.dec{
animation: decrease 2s 0.5s infinite;
}
@keyframes increase {
from { left: -5%; width: 5%; }
to { left: 130%; width: 100%;}
}
@keyframes decrease {
from { left: -80%; width: 80%; }
to { left: 110%; width: 10%;}
}
and html:
<div class="slider">
<div class="line"></div>
<div class="subline inc"></div>
<div class="subline dec"></div>
</div>
I just dont know how to merge it with current Loader impl from domino:
Loader.create(this.element, LoaderEffect.ROTATION).setLoadingText(TRANSLATIONS.loading());