// index.html
<body>
<div class="myProgress"></div>
<div class="myBar"></div>
<br />
<button onclick="move()">Click me</button>
</body>
// style.css
.myProgress {
width: 100 %;
background - color: grey;
}
.myBar {
width: 100 %;
height: 30px;
background - color: #04aa6d;
}
#play - animation {
animation: progress - animation 5s forwards;
}
@keyframes progress - animation {
0 % {
width: 0 %;
}
100 % {
width: 100 %;
}
}
// logic.js
const move = () => {
const progressBar = document.querySelector(".myBar")
progressBar.setAttribute('id', 'play-animation')
}