Skip to content

Progressbar animation from material design #490

@masterdany88

Description

@masterdany88

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    prodomino-ui pro

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions