JSFiddle - React, Tailwind, and code Playground

HTML

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
<p>Жамкай туды:
	<a href="#" class="quarter">25%</a> /
	<a href="#" class="half">50%</a> /
	<a href="#" class="three-quarters">75%</a> /
	<a href="#" class="full">100%</a>
</p>

<div class="progress-bar orange shine">
    <span style="width: 65%"></span>
</div>
<p>Жамкай туды:
	<a href="#" class="quarter">25%</a> /
	<a href="#" class="half">50%</a> /
	<a href="#" class="three-quarters">75%</a> /
	<a href="#" class="full">100%</a>
</p>

<div class="progress-bar green glow">
    <span style="width: 55%"></span>
</div>
<p>Жамкай туды:
	<a href="#" class="quarter">25%</a> /
	<a href="#" class="half">50%</a> /
	<a href="#" class="three-quarters">75%</a> /
	<a href="#" class="full">100%</a>
</p>

CSS

.progress-bar {
    background-color: #1a1a1a;
    height: 25px;
    padding: 5px;
    width: 350px;
    margin: 70px 0 20px 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
    box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
    display: inline-block;
    height: 100%;
    background-color: #777;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out;
}
/*---------------------------*/
 .blue span {
    background-color: #34c2e3;
}
.orange span {
    background-color: #fecf23;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
    background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
    background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
    background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
    background-image: -o-linear-gradient(top, #fecf23, #fd9215);
    background-image: linear-gradient(top, #fecf23, #fd9215);
}
.green span {
    background-color: #a5df41;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
    background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
    background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
    background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
    background-image: -o-linear-gradient(top, #a5df41, #4ca916);
    background-image: linear-gradient(top, #a5df41,...

JavaScript

$(document).ready(function () {
    $('.quarter').click(function () {
        $(this).parent().prev().children('span').css('width', '25%');
    });
    $('.half').click(function () {
        $(this).parent().prev().children('span').css('width', '50%');
    });
    $('.three-quarters').click(function () {
        $(this).parent().prev().children('span').css('width', '75%');
    });
    $('.full').click(function () {
        $(this).parent().prev().children('span').css('width', '100%');
    });
});