domino-ui icon indicating copy to clipboard operation
domino-ui copied to clipboard

Progressbar animation from material design

Open masterdany88 opened this issue 4 years ago • 0 comments

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());

masterdany88 avatar Oct 15 '20 14:10 masterdany88