HTML Linkable Percentage Progress Bar Implemented by JQuery

Recently, I need a percentage progress bar that can be linked with HTML. I found it online and found it, and I manually implemented one.

The problem that needs to be solved is that the two progress bars of A and B need to be based on the percentage A+B=100%. The A progress bar can be dragged, and the B progress bar is linked, and the progress color changes. The implementation function is as follows:

HTML code:

<div class="percentage-container" >
    <div class="a-percentage" data-x='30'>
      <div class="a-percentage-bar"></div>
    </div>
	<div class="b-percentage" data-x='70'>
      <div class="b-percentage-bar"></div>
    </div>
  </div>

 

CSS code:

.percentage-container {
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

.percentage-container .a-percentage {
  margin: 0;
  width: 400px;
  cursor:pointer;
}

.a-percentage {
  float:left;
  padding: 2px;
  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);
}

.a-percentage-bar {
  position: relative;
  height: 16px;
  border-radius: 4px;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s 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);
  background: url("img/stripes.png") 0 0 repeat;
  background-color: #FF5400;
}

.percentage-container .b-percentage {
  margin: 0;
  width: 400px;
  cursor:pointer;
}

.b-percentage {
  float:left;
  padding: 2px;
  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);
}

.b-percentage-bar {
  position: relative;
  height: 16px;
  border-radius: 4px;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -o-transition: 0.2s linear;
  transition: 0.2s 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);
  background: url("img/stripes.png") 0 0 repeat;
  background-color: #FF5400;
}

 

JS code:

$(document).ready(function (){
	var w = $('.a-percentage').width();
	var pos_x = $('.a-percentage').offset().left;
	var inti_x = $('.a-percentage').attr('data-x')*4;
	setProgressAndColor (you_x, w);
	
	$('.a-percentage').click(function(e) {
		var x = e.originalEvent.x || e.originalEvent.layerX || 0;
		x = x - pos_x;
		if(x > 0 && x < w){
			setProgressAndColor(x, w);
		}
	});
});

function setProgressAndColor(p, width){
	$('.a-percentage-bar').width(p)
	$('.a-percentage-bar').css('background-color',calcColor(p));
	var per = Math.floor (p / 4);
	$('.a-percentage-bar').attr('data-x',per);
	
	$('.b-percentage-bar').width(width-p)
	$('.b-percentage-bar').css('background-color',calcColor(width-p));
	per = 100-per;
	$('.b-percentage-bar').attr('data-x', per);
}

function calcColor(x){
	var R = 255
	var G = 15;
	var tmp = Math.floor(G+x);//Rounding to ensure the accuracy of RGB values
	if(tmp <= 255){
		return 'rgb(255,'+tmp+',15)'
	} else {
		R = (R-(tmp-255));
		return 'rgb('+R+',255,15)'
	}
}

 

Using simple JQuery as support, you need to introduce JQuery to see the effect.