Photoshop Question posted in
The official user guide can be found here.

Animating jQuery progress bar – Photoshop

I’ve found this nice animating progress bar tutorial:

http://www.cssflow.com/snippets/animated-progress-bar/demo

However the progress bar doesn’t use jquery and the tutorial doesn’t tell you how to link multiple buttons to the progressbar. So after searching I found this tutorial:

http://www.jcode.ninja/id/8561710

I’ve simply used the code in the tutorial above for now just to see if i can get it working.

My question is how do you animate the progress in the same way as the first tutorial? Is it possible to apply a gradient starting with green then fading to orange then fading into red. I can do this in photoshop, which isnt a problem but can you add it as a progressbar “skin” rather than the default grey?

Thanks in advance

Tags:

5

Answers


  1. 0

    You could use css3 transitions and changing background color. You set the transition and then, by just changing the background color, the animation performs. Check this fiddle: http://jsfiddle.net/en2cb2vq/

    CSS Code:

    .square {
    width: 50px;
    height: 50px;
  transition: background-color 0.5s ease;
  background-color: red;
}
.square.green {
  background-color: green;
}

    HTML Code:

    <a href="#">click me</a>
<div class="square"></div>

    Javascript (with jQuery):

    $("a").click( function() {
 $(".square").addClass("green"); 
    return false;
});
    Login or Signup to reply.
  2. 0

    this will be duplicate question already asked question, try to search and achieve it, don’t ask question like this, if having error in code means u can post the issue,
    http://stackoverflow.com/questions/5047498/how-do-you-animate-the-value-for-a-jquery-ui-progressbar

    Login or Signup to reply.
  3. 0

    You can animate the bar using CSS Transition of .ui-progressbar-value.

    .ui-progressbar-value{
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}

    Take care: Transition isn’t Cross Browser.
    References: http://www.w3schools.com/css/css3_transitions.asp

    A WORKING EXAMPLE:

    http://jsfiddle.net/y2mg8ejk/

    IE8/9 fallbacks

    with old Browser you can use and other approch. jQuery UI has color animation inside his surce code:

    I change my Fiddle to use jquery instead transition:

    Take a look: http://jsfiddle.net/y2mg8ejk/2/

    jQuery UI – Color Animation [doc]: http://jqueryui.com/animate/

    You can use this with old browser and the transition with other.

    Login or Signup to reply.
  4. 0

    I used the first tutorial and created a JSfiddle of that:
    https://jsfiddle.net/LgfcwxLu/

    What you should do is add to the .progress css the gradient:

    .progress {
   padding: 4px;
   background: #5fff32; /* Old browsers */
   background: -moz-linear-gradient(left,  #5fff32 0%, #ff9730 50%, #ff0000 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right top, color-stop(0%,#5fff32), color-stop(50%,#ff9730), color-stop(100%,#ff0000)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(left,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* IE10+ */
   background: linear-gradient(to right,  #5fff32 0%,#ff9730 50%,#ff0000 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5fff32', endColorstr='#ff0000',GradientType=1 ); /* IE6-9 */
 }

    You can create the gradient with this tool:
    http://www.colorzilla.com/gradient-editor/

    Let me know if that helps you?

    Login or Signup to reply.
  5. 0

    You can simply apply the styles from the colored progress-bar onto the jQuery UI progress-bar, including the stripes. In the following jsfiddle I took the essential css and changed the .progress-bar class name in the stylesheet to .ui-progressbar-value. To change the color, just change it with jQuery inline or add classes for each color and switch the class with jQuery.

    See the fiddle. It is not perfect but it will give you an idea.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search