Title: Responsive Progress Bar Last modified: August 20, 2016 --- # Responsive Progress Bar * Resolved [crucou](https://wordpress.org/support/users/crucou/) * (@crucou) * [14 years, 1 month ago](https://wordpress.org/support/topic/responsive-progress-bar/) * Such a wonderful plugin! Simple and easy. THANK YOU! * I am trying to make the progress bar responsive. I have everything done and looking great. The only issue is when I adjust the width of my browser everything responds perfectly except for the `{$progress}` which will not render in percentages. This is due to the wppb-animate.js which is overriding it and rendering pixels instead. If I delete wppb-animate.js it becomes completely responsive but then I lose the amazing sleek animation. Is there anyway to fix it to render in percentages to make it completely responsive and still have the animation? * Thanks for your help!!! šŸ™‚ * [http://wordpress.org/extend/plugins/progress-bar/](http://wordpress.org/extend/plugins/progress-bar/) Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/responsive-progress-bar/page/2/?output_format=md) [ā†’](https://wordpress.org/support/topic/responsive-progress-bar/page/2/?output_format=md) * Thread Starter [crucou](https://wordpress.org/support/users/crucou/) * (@crucou) * [14 years, 1 month ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2710866) * By the way I gave this 5 stars. Great job! And thank you for your generosity. * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [14 years, 1 month ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2710877) * To be honest, I hadnā€™t ever looked at thatā€¦the plugin is basically a slightly modified implementation of the tutorial here for WordPress: [http://css-tricks.com/css3-progress-bars/](http://css-tricks.com/css3-progress-bars/) * Unfortunately, Iā€™m not a javascript genius, so while Iā€™m sure itā€™s *possible* I couldnā€™t tell you how to do it. I actually had considered taking the animation out entirely to reduce the footprint of the plugin, but left it in because it looks so nice. šŸ™‚ But disabling/removing the javascript is certainly an optionā€” you may even be able to get the progress to animate using [css3 transitions](http://www.alistapart.com/articles/understanding-css3-transitions/). * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711184) * Yes, there is way. And using CSS. Paste this in your themeā€™s style.css : * ``` div.wppb-progress { width: 100% !important; } ``` * Since I am using this in my sidebar (see here : [http://autospace.co/](http://autospace.co/)) so I just make its width as much as it can cover that is 100% If youā€™re using this progress bar in any post or page, change to required like 25% or something. That depends on you. šŸ™‚ * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711185) * It looks like itā€™s not quite doing what you want it to be doing. This is what your progress bar looks like to me in Chrome: [http://bit.ly/UCv3RA](http://bit.ly/UCv3RA) * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711186) * I am having problems with my site currently but this method works. Iā€™ll post as soon my site working good again. * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711187) * [@aditya](https://wordpress.org/support/users/aditya/) try this: * ``` div.wppb-progress { width: 316px!important; float: left; } ``` * (this worked for me in Chromeā€™s inspector) * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711188) * Can you people wait for minute, My code is working pretty fine. Thereā€™s issue with cloudflare.. they motherf#$@# f#$#%cked my siteā€¦ >:o * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711189) * Chris Reynolds: Now open my site. I was not lying. I just know how to use CSS with great responsiveness and if you want, I can provide clear docs how to use it. * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711190) * I didnā€™t think you were lying, I just wanted to make sure it worked because I can add that to the plugin as a shortcode option, e.g. `[wppb progress=17.5 responsive =true]` * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711191) * Or you can make responsive it by default. So if user doesnā€™t have resposive theme it will not affect him. šŸ™‚ * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711192) * yeah, although itā€™d always be 100% width which might not be desirableā€¦though I guess you could always just change that in the cssā€¦ * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711193) * Yes. Well then, `[wppb progress=17.5 responsive=true]` will be right. šŸ™‚ * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711194) * Added to the latest version of the plugin (1.0.3). Note, that itā€™s not strictly responsive ā€” the width doesnā€™t change dynamically when I resize the window, at least it didnā€™t in my testing ā€” so instead of calling the option ā€œresponsiveā€ I called it ā€œfullwidthā€. When fullwidth is used, it will use the 100% width for all the elements so it will take the width of the containing element (sidebar, post area, etc). * [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * (@callingmedic911) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711195) * To see responsiveness, you must have responsive theme, so that container resizes and tell the progress bar to resize. šŸ™‚ As to try out, open my site and resize window, progress bar will respond. šŸ™‚ * EDIT: Except from taking favor of responsiveness, I would like to suggest you to use custom shortcode control for custom width like `[wppb progress=17.5 responsive =25], it will enable the responsiveness as well as it will set width to 25% for ease. * EDIT2: I just updated (with some hacks like change in color) and used parameter fullwidth=true and it is fully responsive. Great. * Plugin Author [Chris Reynolds](https://wordpress.org/support/users/jazzs3quence/) * (@jazzs3quence) * [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/#post-2711196) * Admittedly I only tested with Thematic which is what I happened to have installed at the time. Youā€™re probably 100% right that itā€™s not responsive, I was just testing to make sure the 100% width worked along with the hard-coded width. * What I could do would be to have a ā€œwidthā€ parameter where you set the width to a percent (width=25) or better yet, you can actually define the width (width =25%/width=25px) and it uses that, then you can set it to whatever you need ( or use fullwidth). Viewing 15 replies - 1 through 15 (of 16 total) 1 [2](https://wordpress.org/support/topic/responsive-progress-bar/page/2/?output_format=md) [ā†’](https://wordpress.org/support/topic/responsive-progress-bar/page/2/?output_format=md) The topic ā€˜Responsive Progress Barā€™ 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/) * 16 replies * 3 participants * Last reply from: [Aditya Pandey](https://wordpress.org/support/users/callingmedic911/) * Last activity: [13 years, 7 months ago](https://wordpress.org/support/topic/responsive-progress-bar/page/2/#post-2711197) * Status: resolved