CODEWITHSUNDEEP
htmlcss
Tom el Safadi
Tom el Safadi

Reputation: 6746

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)

Upvotes: 2

Views: 8206

Answers (3)

Thomas Whitehead
Thomas Whitehead

Reputation: 101

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%; }
}

Upvotes: 3

yaqob
yaqob

Reputation: 83

A straight forward way of getting this done is through jquery:

$(window).load(function() {
    $("#Progress").css("width", "50%");
});

Upvotes: 3

Cameron
Cameron

Reputation: 694

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>

Upvotes: 4

Related Questions