I am trying to make the progress bar expand from 0% width to 50% width in a span of 2 seconds. Here is the code I have written:
<style>
#progressbar {
background-color: #000000;
border-radius: 8px;
padding: 3px;
width: 400px;
}
#progressbar div {
background-color: #0063C6;
height: 10px;
border-radius: 5px;
animation:loadbar 2s;
-webkit-animation:loadbar 2s;
}
@keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
@-webkit-keyframes loadbar {
0% {
width: 0%;
}
100% {
width: 50%;
}
}
</style>
<div id="progressbar">
<div></div>
</div>
Upon opening the page, the progress bar's width fills up completely rather than reaching 50%. Can you help me identify what mistake I may have made?