Anokrize Anokrize - 3 months ago 36
CSS Question

CSS progress bar animation

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

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>

Comments