Get a free trial // Grow your CSS skills // Land your dream job

jQuery equivalent for css selector progress::-webkit-progress-value

  • # April 17, 2013 at 3:58 am

    I need to adjust the transition time for an HTML5 ` `-Bar with JS (jQuery) but I cannot find the right selector in jQuery doing this.

    My current tries:


    progress::-webkit-progress-value {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
    transition: all 0.5s; /* Works like a charm */

    JavaScript (with no success):

    // These lines do nothing when the progress value changes:
    $(“.progressSelectorClass[progress-value]”).css({“-webkit-transition” : “all 6s”});
    $(“.progressSelectorClass > *”).css({“-webkit-transition” : “all 6s”});
    $(“.progressSelectorClass”).css({“-webkit-transition” : “all 6s”});

    // This will return an error:
    $(“.progressSelectorClass::-webkit-progress-value”).css({“-webkit-transition” : “all 6s”});

    Is there any chance to select the `progress::-webkit-progress-value` in JavaScript (with or without jQuery)?

    # April 17, 2013 at 4:24 am


    You’ll want to do this

    $(document).ready(function() {


    You can try this


    You can’t select using the entire tag with jQuery.

    # April 17, 2013 at 5:01 am

    Hi rahuldsg,

    Thanks for your reply, but I’m not having problems getting or setting the value of the progress-bar. I try to adjust the css `transition` on the `progress-value`.

    # April 19, 2013 at 10:05 am

    I’ve just created a jsFiddle that should be more clearly what I try to achieve:
    []( “”)

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed