how to make a progress bar that goes from 0 to 70 and do not come back from the beginning?

0

I need a bar that goes from 0 to 70% and does not return to 0 after reaching 70, can not restart the cycle, must stop when it reaches the maximum number.

@keyframes site {
    from { width: 0 }
    to { width: 73% }
}

.siteload {
    background: #E7E7E7;
    position: relative;
    height: 25px;
    width: 80%;
    left: 45px;

    border-radius: 6px;
}

.siteload::after {
    border-radius: 6px;
    animation: site 5s infinite ease-in-out;
    background: rgba(247,170,88,1);
    content: '73%';
    position: absolute;
    left: 0; top: 0; bottom: 0;

}

    
asked by anonymous 11.07.2018 / 06:19

1 answer

1

What causes it to repeat is animation-iteration-count that was infinite :

animation: site 5s infinite ease-in-out;
/*                    ^---- este       */

This indicates how many times the animation repeats, and infinite , as its name indicates, repeats infinitely.

In spite of this, even without infinite the animation will return to the initial state after finishing. To change this behavior you can put animation-fill-mode as forwards which holds the properties applied by the animation.

By combining these two changes the animation property should look like this:

animation: site 5s ease-in-out forwards;

See your example working with this change:

@keyframes site {
    from { width: 0 }
    to { width: 73% }
}

.siteload {
    background: #E7E7E7;
    position: relative;
    height: 25px;
    width: 80%;
    left: 45px;

    border-radius: 6px;
}

.siteload::after {
    border-radius: 6px;
    animation: site 5s ease-in-out forwards; /* linha alterada */
    background: rgba(247,170,88,1);
    content: '73%';
    position: absolute;
    left: 0; top: 0; bottom: 0;

}
<div class="siteload"></div>
    
11.07.2018 / 11:27