Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

Question

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

I'm still getting the hang of things, so I apologize if my question isn't perfectly clear. What I'm trying to do is create a dynamic progress bar with multiple colors that animates upon loading the page. I've seen some examples similar to what I want, but I'm struggling with the javascript/jquery aspect as it's not my strong suit.

For instance, Example 1: https://codepen.io/tamak/pen/hzEer

This link demonstrates how I'd like the progress bar to grow in size as the page loads and stop at specific intervals.

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

And then there's Example 2:

This example is very close to what I want, except I prefer for the progress bar to operate without any buttons. My main goal is to have the colors transition from red to green as it progresses.

Thank you in advance for any assistance! I know it might be a big ask, but I appreciate anyone willing to give it a shot.

javascript jquery html css progress-bar

Answer 1

Answer №1

Perhaps you'll find this helpful: Creating a Bootstrap progress bar with gradient color that adjusts proportionally to active width

Regarding the adjustment of the progress bar, could you provide more specifics on how you envision it changing? It doesn't necessarily require buttons for control, but clarity on what you're aiming for would be beneficial. Can you elaborate further on this aspect?

Answer 2

Perhaps you'll find this helpful: Creating a Bootstrap progress bar with gradient color that adjusts proportionally to active width

Regarding the adjustment of the progress bar, could you provide more specifics on how you envision it changing? It doesn't necessarily require buttons for control, but clarity on what you're aiming for would be beneficial. Can you elaborate further on this aspect?

Answer 3

Answer №2

You have the ability to set up click events for buttons with specific time intervals, depending on the 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>

Answer 4

You have the ability to set up click events for buttons with specific time intervals, depending on the 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>

Creating a Vibrant Progress Bar with Multiple Colors: A Step-by-Step Guide

Answer №1

Answer №2

Similar questions

Tips on showing a specific div when a button is clicked using jQuery and Bootstrap

How to customize GtkEntry in GTK3 with CSS to eliminate the default blue outline?

Having difficulties integrating a login solution due to an error saying "eslint Promise executor functions should not be async no-async-promise-executor"

Remove text input from textarea using jQuery

Vue.js has a feature where it automatically closes the form tag within a for loop

html interactive/expandable tree

Customize your website with eye-catching full width colored blocks using Bootstrap 3

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

Employing a script that is generated from the jQuery AJAX response

Why is it that the bootstrap text color class isn't applying for my project?

Use TypeScript to cast the retrieved object from the local storage

How can I stop the page from jumping when a Button is clicked in ReactJS?

Ways to make <li> elements display inline with React Bootstrap Rows and Columns

Maintain HTML formatting when page is refreshed

Tips on how to eliminate focus after choosing a radio button in Angular Material?

What is the best way to save a JSON stream to a file in Node.js?

Is it true that Internet Explorer does not support border radius?

Insert start and end tags at the appropriate locations

Tips for incorporating a background color into a specific section

Having trouble with Vue i18n and TypeScript: "The '$t' property is not recognized on the 'VueConstructor' type." Any suggestions on how to resolve this issue?