How to make a progress bar that goes from 0 to 70 and doesn’t come back from the beginning?

Question

I need a bar that goes from 0 to 70% and that doesn’t go back to 0 after reaching 70, you can’t start the cycle again, you have to stop when you reach 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;

}

Answer 1

What makes it repeat is Animation-iteration-Count which left the 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.

Despite that, even without the infinite animation will return to initial state after finished. To modify this behavior you can put animation-fill-mode as forwards, that maintains the properties applied by the animation.

Combining these two property changes animation 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>