Progress Bar :-  Progress bars demonstrate the fulfillment rate of an operation or procedure. It can be utilized to demonstrate a client that how far along he/she is in a procedure.

Below is the HTML, CSS and Jquery task, which shows how you can create a Progress bar with gradient effect :-

HTML :-

<div class="progress" data-amount="80">
  <div class="amount"></div>
</div>

CSS :- With the help of following CSS, you can easily give gradient effect to the progress bar.

.progress {
  position: relative;
  height: 31px;
  background: rgb(255, 0, 0);
  background: -moz-linear-gradient(left, rgba(255, 0, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(100%, rgba(0, 255, 0, 1)));
  background: -webkit-linear-gradient(left, rgba(199, 132, 132, 1) 0%, rgba(41, 84, 41, 1) 100%);
  background: -o-linear-gradient(left, rgba(199, 132, 132, 1) 0%, rgba(41, 84, 41, 1) 100%);
  background: -ms-linear-gradient(left, rgba(199, 132, 132, 1) 0%, rgba(41, 84, 41, 1) 100%);
  background: linear-gradient(to right, rgba(199, 132, 132, 1) 0%, rgba(41, 84, 41, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#00ff00', GradientType=1);
}
.amount {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  transition: all 0.8s;
  background: grey;
  width: 0;
}
.progress:before {
  content: attr(data-amount)"% Complete";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  text-align: center;
  line-height: 31px;
}

jQuery :-

$(document).ready(function () {
    var dataval = parseInt($('.progress').attr("data-amount"));
    if (dataval < 100) {
        $('.progress .amount').css("width", 100 - dataval + "%");
    }
    
   function modifyProgressVal(type) {
        dataval = parseInt($('.progress').attr("data-amount"));
        if (type == 1) dataval = Math.min(100,dataval + 10)
        else if (type == -1) dataval = Math.max(0,dataval - 10);
        $('.progress .amount').css("width", 100 - dataval + "%");
        $('.progress').attr("data-amount", dataval);
    }
});

Below is the link of Output :-

 https://jsfiddle.net/2st85p33/12/