Title: animation
Last modified: August 22, 2016

---

# animation

 *  Resolved [landonaldrich](https://wordpress.org/support/users/landonaldrich/)
 * (@landonaldrich)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/animation-6/)
 * animation seems not to work when the bar is set to be responsive. is this something
   i need to fix or is it just not possible?
 * [https://wordpress.org/plugins/progress-bar/](https://wordpress.org/plugins/progress-bar/)

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/)
 * (@jazzs3quence)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/animation-6/#post-5946582)
 * It’s been a while since I added the responsive parameter to the plugin, but from
   what I remember, the responsive progress bar loses the animation. This is because
   the animation is based on the width of the bar. Normally the bar has a hard-coded
   width, so you tell it “i want a progress bar that’s 57% of that width” and it’s
   pretty simple to figure that out mathematically. With the _responsive_ bar, the
   width is dynamic — it’s whatever the width of the container it’s in is. And that
   container can change size, too. So there’d need to be a lot more complicated 
   javascript magic going on to calculate the width based on the current container
   and, currently, the animation isn’t even using javascript for most of that, it’s
   just using CSS transitions.
 * That was probably more info than you needed to know.
    TL;DR — it’s more complicated
   than it’s worth. 😀
 *  [fong_kah_chun86](https://wordpress.org/support/users/fong_kah_chun86/)
 * (@fong_kah_chun86)
 * [11 years ago](https://wordpress.org/support/topic/animation-6/#post-5946766)
 * Actually, I managed to get it working at 100% width without using the short code.
   I code the following HTML and uses the style class for animation:
 *     ```
       <div style="display: block; width:100%">
         <div class="wppb-wrapper inside" style="width:100%">
           <div class="inside">55 %</div>
           <div class="wppb-progress fixed" style="width:100%">
             <span class="green" style="width: 55%;"><span></span></span>
           </div>
         </div>
         <div class="wppb-wrapper inside" style="width:100%">
           <div class="inside">45 %</div>
           <div class="wppb-progress fixed" style="width:100%">
             <span class="blue" style="width: 45%;"><span></span></span>
           </div>
         </div>
       </div>
       ```
   
 * When the user dynamically resize the browser, the width of the bar will be fixed,
   but at least the animation will grow its width to the correct percentage upon
   a page refresh.
    My example at: [http://www.peircesec.moe.edu.sg/curriculum/english-lit-drama-draft/](http://www.peircesec.moe.edu.sg/curriculum/english-lit-drama-draft/)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘animation’ is closed to new replies.

 * ![](https://ps.w.org/progress-bar/assets/icon-256x256.png?rev=2909774)
 * [Progress Bar](https://wordpress.org/plugins/progress-bar/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/progress-bar/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/progress-bar/)
 * [Active Topics](https://wordpress.org/support/plugin/progress-bar/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/progress-bar/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/progress-bar/reviews/)

## Tags

 * [bar](https://wordpress.org/support/topic-tag/bar/)

 * 2 replies
 * 3 participants
 * Last reply from: [fong_kah_chun86](https://wordpress.org/support/users/fong_kah_chun86/)
 * Last activity: [11 years ago](https://wordpress.org/support/topic/animation-6/#post-5946766)
 * Status: resolved