CSS progress bar animation - html

Question

I am having a progess bar which should become filled up by 50% width.
This is my current html and css for the progress bar.
HTML:
<div id="ProgressBar">
<div id="Progress"></div>
</div>
CSS:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
-webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
#Progress:hover {
width: 50%;
}
As you can see the transition is starting after a hover over the progress. My goal is to have this transaition starting directly after the page loads. I know there are some examples in the internet but they are all having fade-in effects only and I can't figure it out.
I appreciate your help.
Here my fiddle:
https://jsfiddle.net/Anokrize/ssL9fjy9/
(I would like to avoid any javascript or jquery, if that is possible)

Answer 1

How about doing it with keyframes, like this:
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 50%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation-name: progressBar;
animation-iteration-count: 1;
animation-duration: 2s;
}
#keyframes progressBar {
0% {
width: 10%;
}
100% {
width: 50%;
}
}
<div id="ProgressBar">
<div id="Progress"></div>
</div>

Answer 2

A straight forward way of getting this done is through jquery:
$(window).load(function() {
$("#Progress").css("width", "50%");
});

Answer 3

Usually you'd want something feeding a progress bar so it's actually showing progress... but if you just want it to start on load, you can use the animation property with keyframes.
#ProgressBar {
width: 100%;
height: 30px;
border: 1px solid black;
border-radius: 7px;
padding: 4px;
}
#Progress {
width: 10%;
background-color: #4A90E2;
height: 100%;
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
border-color: #4A90E2;
animation: progress 1s ease-out forwards;
}
#keyframes progress {
from { width: 10%; }
to { width: 50%; }
}