Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Progress bar with Gradient effect using jQuery

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.19k
    Comment on it

    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/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: