{"name":"Custom progress bar","slug":"custom-progress-bar","version":"2.0","author":"arif hassan","author_profile":"https://profiles.wordpress.org/aarifhsn/","requires":"3.0.1","tested":"4.3.34","requires_php":false,"requires_plugins":[],"rating":100,"ratings":{"1":0,"2":0,"3":0,"4":0,"5":5},"num_ratings":5,"support_threads":0,"support_threads_resolved":0,"downloaded":11823,"last_updated":"2015-08-29 6:47pm GMT","added":"2014-05-08","homepage":"http://design.hellothirteen.com/custom-progress-bar/","sections":{"description":"

Progressbar plugin will enable awesome progress bar with various styles.
\nyou can change your progressbar with various styles with custom width, color, animation styles.

demo and documentation: http://design.hellothirteen.com/custom-progress-bar/

\n","installation":"

This section describes how to install the plugin and get it working.

e.g.

Upload custom-progress-bar.php to the /wp-content/plugins/ directory
Activate the plugin through the ‘Plugins’ menu in WordPress
Place ” in your templates
to get the hook name, see the documentation.
Use shortcode in posts, page or in widget

Plugin usage –
\nprogress bar can be easily embedded into any page or post. To use it, simply paste this code into your post, page or widget.

[progressbar_simple]

Usages of different progressbar, you can use this shortocode in your posts, pages or widgets.

To use striped progress bar, use this shortocode

Chnage the text field as you want.

[progressbar_striped width=\"78\" color=\"#ddd\" bg_color=\"#1582cf\" text=\"78% completed\"]

To use striped animated bar, use this shortocode

[progressbar_striped class=\"active\" width=\"75\" text=\"75% In PHP\" bg_color=\"#e43573\"]

To use 3 Colors progress bar, use this shortocode

for default style

[pregressbar_multicolor]

To use 3 Colors progress bar, use this shortocode

for custom style style

[pregressbar_multicolor width=\"90\" bg_color_1=\"#ec13b7\" bg_color_2=\"#cd60b2\" bg_color_3=\"#ed99d8\" text_1=\"90%\"]

To customize your progress bar, you have to use some codes with this shortcode:

You can use width for changing your progressbar width.

You can use bg_color for changing your progressbar background-color.

You can use color for changing your progressbar font-color. e.g.

[progressbar width=\"60\" color=\"#000\" bg_color=\"#aaa\"]

[progressbar_striped width=\"25\" color=\"#ddd\" bg_color=\"#000\"]

Also you can use text for changing your progressbar text over the progressbar.

[progressbar_striped width=\"25\" color=\"#ddd\" text=\"25% completed\"]

This plugin also supported widget shortcode, you can use shortcode in the widget also.

\n","changelog":"

2.0

Added Circular progress bar and changed the style of progressbar

1.0

Initial Release

\n","screenshots":"

"},"download_link":"https://downloads.wordpress.org/plugin/custom-progress-bar.zip","screenshots":{"1":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-1.png?rev=1233833","caption":"screenshot-1"},"2":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-2.png?rev=1233834","caption":"screenshot-2"},"3":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-3.png?rev=1233835","caption":"screenshot-3"},"4":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-4.png?rev=1233836","caption":"screenshot-4"},"5":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-5.png?rev=910245","caption":""},"6":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-6.png?rev=910245","caption":""},"7":{"src":"https://ps.w.org/custom-progress-bar/assets/screenshot-7.png?rev=910245","caption":""}},"tags":{"circled-progress-bar":"circled progress bar","custom-progressbar":"custom progressbar","percent-bar":"percent bar","progressbar":"progressbar","round-progress-bar":"round progress bar"},"versions":[],"donate_link":"","icons":{"default":"https://s.w.org/plugins/geopattern-icon/custom-progress-bar_bdc9db.svg"},"contributors":{"aarifhsn":"https://profiles.wordpress.org/aarifhsn/"}}

Custom progress bar

Screenshots

Categories

Get New Themes & Resources