Start CSS Animation when visible

Question

first of all, i tried every other method here but everything failed and i dont know why.

I have a progress bar and want to start the animation, when it is viewport. I know i need JS, but cant get any code to work.

Here i have my html and css setup: https://jsfiddle.net/ta8nfec5/1/

}

.progress {
    background: rgba(0,0,0,0.1);
    justify-content: flex-start;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0 5px;
    display: flex;
    height: 40px;
    width: 500px;
}

.progress-bar {
    animation: load 5s normal forwards;
    box-shadow: 0 10px 40px -10px #FD660D;
    border-radius: 100px;
    background: #FD660D;
    height: 30px;
    width: 0;
}

@keyframes load {
    0% {
        width: 0;
    }

    100% {
        width: 40%;
    }
}

.progress-bar1 {
    animation: load1 5s normal forwards;
    box-shadow: 0 10px 40px -10px #FD660D;
    border-radius: 100px;
    background: #FD660D;
    height: 30px;
    width: 0;
}

@keyframes load1 {
    0% {
        width: 0;
    }

    100% {
        width: 40%;
    }
}

.progress-bar2 {
    animation: load2 5s normal forwards;
    box-shadow: 0 10px 40px -10px #FD660D;
    border-radius: 100px;
    background: #FD660D;
    height: 30px;
    width: 0;
}

@keyframes load2 {
    0% {
        width: 0;
    }

    100% {
        width: 60%;
    }
}

.progress-bar3 {
    animation: load3 5s normal forwards;
    box-shadow: 0 10px 40px -10px #FD660D;
    border-radius: 100px;
    background: #FD660D;
    height: 30px;
    width: 0;
}

@keyframes load3 {
    0% {
        width: 0;
    }

    100% {
        width: 70%;
    }
}
}

                <div class="container textbox-box-center-wide">
                    <h2 class="h2-big">Test header</h2> 
                    <div class="progress" style="width: 1500px; height: 50px; margin-bottom: 17px;">
                        <div class=" progress-bar" style="height: 29px;"></div>
                        <b>&nbsp; 20-40% Senkung der
Bearbeitungskosten¹</b>
                    </div>
                    <div class="progress" style="width: 1500px; height: 50px; margin-bottom: 17px;">
                        <div style="height: 29px;" class=" progress-bar"></div>
                        <b>&nbsp; 20-40%&nbsp;Verringerung der
Arbeitsschritte¹</b>
                    </div>
                    <div class="progress" style="width: 1500px; height: 50px; margin-bottom: 17px;">
                        <div class="progress-bar2" style="height: 29px;"></div>
                        <b>&nbsp; 50-90% Reduzierung der Bearbeitungszeit¹</b>
                    </div>
                    <div class="progress" style="width: 1500px; height: 50px;">
                        <div class=" progress-bar3" style="height: 29px;"></div>
                        <b>&nbsp; 54321 aktive Enterprise-User</b>
                    </div>
                </div>

Does anybody have the final JS Code for me? :-(

Thanks!