PROGRESS BAR RESETS IN HARLOWE

I did a progress bar it starts but it resets when go with the middle...
How can I do?


<div class="progress-bar">
<br>
<div style="width: 76.7%"></div>
</div>

<style>

tw-story{
width: 100%
}


body { background: black; padding: 100px; margin: 0;}

.progress-bar {

background-image: url(./bar.png) ;
background-repeat: no-repeat;
width: 95%;
height: 10%;



}
.progress-bar > div {
color: white;
background: url(./sal.png);
background-repeat: no-repeat;
overflow: hidden;
white-space: nowrap;
margin: -84px 0px 1px 85px;
padding-bottom: 35px;
border-radius: 10px;
-webkit-animation: progress-bar 2s;

animation: progress-bar 2s;
}

@-webkit-keyframes progress-bar {
0% { width: 0; }
}

@keyframes progress-bar {
0% { width: 0; }
}
</style>