How To Make an Animated Multi-Color Progress Bar?

Question

I'm rather new so apologies if what I'm asking isn't exactly clear. I'm trying to build a multi-color progress bar that animates when the page loads. I have found examples similar to what I'm looking for, but the javascript/jquery is what's giving me problems. I'm not skilled in that area.

Example 1: https://codepen.io/tamak/pen/hzEer

That link shows how I want the bar to progressively extend when the page comes up and stop at certain percentages.

jQuery(document).ready(function(){
  jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({
      width:jQuery(this).attr('data-percent')
    },6000);
  });
});

Example 2: http://www.cssflow.com/snippets/animated-progress-bar/demo

Is very very close to what I'm after, but I want the progress bar to function without the buttons. the colors themselves, progressing from red to green, is what I'm trying to achieve.

Thanks in advance! I know it's probably asking for a lot, but I'm hoping someone is willing to give it a try.

Answer 1

Maybe this will help: Bootstrap progress bar with gradient color showing proportionally on active width

As for moving the progress bar, how exactly do you want it to change? You don't need buttons to do it, but something needs to happen. Could you explain that piece in a little more detail?

Answer 2

You can setup click events of buttons with time interval, based on percentage.

 $(document).ready(function(){ var CurrentProgress = '75%'; setTimeout(function(){ $(".label").each(function() { if($(this).html()==CurrentProgress){ $(this).click(); } }) },1000) }) 

 .container { margin: 80px auto; width: 640px; text-align: center; } .container .progress { margin: 0 auto; width: 400px; } .progress { padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .progress-bar { position: relative; height: 16px; border-radius: 4px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } .progress-bar:before, .progress-bar:after { content: ''; position: absolute; top: 0; left: 0; right: 0; } .progress-bar:before { bottom: 0; background: url("../img/stripes.png") 0 0 repeat; border-radius: 4px 4px 0 0; } .progress-bar:after { z-index: 2; bottom: 45%; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); } #five:checked ~ .progress > .progress-bar { width: 5%; background-color: #f63a0f; } #twentyfive:checked ~ .progress > .progress-bar { width: 25%; background-color: #f27011; } #fifty:checked ~ .progress > .progress-bar { width: 50%; background-color: #f2b01e; } #seventyfive:checked ~ .progress > .progress-bar { width: 75%; background-color: #f2d31b; } #onehundred:checked ~ .progress > .progress-bar { width: 100%; background-color: #86e01e; } .radio { display: none; } .label { display: none; margin: 0 5px 20px; padding: 3px 8px; color: #aaa; text-shadow: 0 1px black; border-radius: 3px; cursor: pointer; } .radio:checked + .label { color: white; background: rgba(0, 0, 0, 0.25); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section class="container"> <input type="radio" class="radio" name="progress" value="five" id="five" checked> <label for="five" class="label">5%</label> <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive"> <label for="twentyfive" class="label">25%</label> <input type="radio" class="radio" name="progress" value="fifty" id="fifty"> <label for="fifty" class="label">50%</label> <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive"> <label for="seventyfive" class="label">75%</label> <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred"> <label for="onehundred" class="label">100%</label> <div class="progress"> <div class="progress-bar"></div> </div> </section>