Very simple animated progress bar on load

Posted by:

Alex on October 18, 2014

This is a very easy way of getting a progress bar or similar element to transition from one state/width to another once the website has fully loaded. Useful for enhancing a point, or ability of a company/profile etc if used subtly and effectively.

Demo:

This works by first of all setting your progress by to 0% via CSS, and then setting up transition rules that any changes will happen over 4 seconds (you can, of course, change this to suit your preference, as well as colours etc.)
The javascript will then set a new width and background colour to the bar which will appear to animate due to the transitions rules mentioned above.

Achievable in simply a few lines of code.

The CSS:

.progress_bar {
  height: 15px;
  background: orange;
  width: 0%;
  -moz-transition: all 4s ease;
  -moz-transition-delay: 1s;
  -webkit-transition: all 4s ease;
  -webkit-transition-delay: 1s;
  transition: all 4s ease;
  transition-delay: 1s;
}

THE HTML:

<div id="progressBar" class="progress_bar"></div>

The Javascript (Vanilla), with a commented line if you want to animate to a percentage output by PHP etc.

  // Assign your element ID to a variable.
  var progress = document.getElementById("progressBar");
  // Pause the animation for 100 so we can animate from 0 to x%
  setTimeout(
    function(){
      progress.style.width = "100%";
      // PHP Version:
      // progress.style.width = <?php echo round($percentage150,2); ?>+"%";
      progress.style.backgroundColor = "green";
    }
  ,100);

The whole code put together, very simple:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Simple Animated CSS/JS Progress Bar</title>
  <link rel="author" href="https://plus.google.com/u/0/116030566292183707588/posts">
  <!-- A simple Animated progress by @guwii -->
</head>
<body>
<style>
.progress_bar {
  height: 10px;
  background: orange;
  width: 0%;
  -moz-transition: all 4s ease;
  -moz-transition-delay: 1s;
  -webkit-transition: all 4s ease;
  -webkit-transition-delay: 1s;
  transition: all 4s ease;
  transition-delay: 1s;
}
</style>

<div id="progressBar" class="progress_bar"></div>

<script>
  // Assign your element ID to a variable.
  var progress = document.getElementById("progressBar");
  // Pause the animation for 100 so we can animate from 0 to x%
  setTimeout(
    function(){
      progress.style.width = "100%";
      // PHP Version:
      // progress.style.width = "<?php echo $progressPercentage; ?>";
      progress.style.backgroundColor = "green";
    }
  ,100);
</script>
</body>
</html>