Title: Custom progress bar Author: Arif Hassan Published: 2014年5月8日 Last modified: 2015年8月29日 --- 搜尋外掛 ![](https://ps.w.org/custom-progress-bar/assets/banner-772x250.png?rev=1233832) 這個外掛**並未在最新的 3 個 WordPress 主要版本上進行測試**。開發者可能不再對這個 外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。 ![](https://s.w.org/plugins/geopattern-icon/custom-progress-bar_bdc9db.svg) # Custom progress bar 由[Arif Hassan](https://profiles.wordpress.org/aarifhsn/) [下載](https://downloads.wordpress.org/plugin/custom-progress-bar.zip) * [詳情](https://zh-hk.wordpress.org/plugins/custom-progress-bar/#description) * [評價](https://zh-hk.wordpress.org/plugins/custom-progress-bar/#reviews) * [安裝](https://zh-hk.wordpress.org/plugins/custom-progress-bar/#installation) * [開發](https://zh-hk.wordpress.org/plugins/custom-progress-bar/#developers) [支援](https://wordpress.org/support/plugin/custom-progress-bar/) ## 描述 Progressbar plugin will enable awesome progress bar with various styles. you can change your progressbar with various styles with custom width, color, animation styles. demo and documentation: http://design.hellothirteen.com/custom-progress-bar/ ## 螢幕截圖 * [[ * screenshot-1 * [[ * screenshot-2 * [[ * screenshot-3 * [[ * screenshot-4 * [[ * [[ * [[ ## 安裝 This section describes how to install the plugin and get it working. e.g. 1. Upload custom-progress-bar.php to the `/wp-content/plugins/` directory 2. Activate the plugin through the ‘Plugins’ menu in WordPress 3. Place ” in your templates 4. to get the hook name, see the documentation. 5. Use shortcode in posts, page or in widget Plugin usage – progress 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. ## 評價 ![](https://secure.gravatar.com/avatar/44fcf6c88acf4c81e1a3ccbb3717a6eb3136b77a594acb07b26fbcc27865c1c0? s=60&d=retro&r=g) ### 󠀁[Super / Good !](https://wordpress.org/support/topic/super-good/)󠁿 [bgtbbox](https://profiles.wordpress.org/bgtbbox/) 2016年11月11日 Très bon plugin simple, fonctionnel et beau. Merci 😉 ![](https://secure.gravatar.com/avatar/63f65aaaacdcd442226ee28ad4e6b10c09abc7ee09b7c7d94ae3fb3e147150e5? s=60&d=retro&r=g) ### 󠀁[Works great!](https://wordpress.org/support/topic/works-great-2448/)󠁿 [ywamer](https://profiles.wordpress.org/ywamer/) 2016年9月3日 I’ve been using this for several months now to highlight a fundraising campaign we want to draw attention to. The plugin works great and is quickly modified using a shortcode, like: [progressbar_striped class="active" width="50" color="#fff" bg_color ="#aa0000" text="50% to budget… and getting closer!"] Much thanks to the developer! ![](https://secure.gravatar.com/avatar/fb113088f3935ca0fbb79516f0ff1c32457c925bc4fa1bed5cae66f6ab749c26? s=60&d=retro&r=g) ### 󠀁[Nice plugin!](https://wordpress.org/support/topic/nice-plugin-1183/)󠁿 [Miguelriv](https://profiles.wordpress.org/miguelriv/) 2016年9月3日 Nice plugin, i love circle progress bar! [ 閱讀全部5個評價 ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/) ## 貢獻者及開發者 “Custom progress bar” 是一個開源的軟體。以下的人對這個外掛作出了貢獻。 貢獻者 * [ Arif Hassan ](https://profiles.wordpress.org/aarifhsn/) [將 Custom progress bar 外掛本地化為台灣繁體中文版。](https://translate.wordpress.org/projects/wp-plugins/custom-progress-bar) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/custom-progress-bar/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/custom-progress-bar/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/custom-progress-bar/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/custom-progress-bar/)。 ## 修改日誌 #### 2.0 * Added Circular progress bar and changed the style of progressbar #### 1.0 * Initial Release ## 其它 * Version **2.0** * Last updated **11 年之前** * Active installations **100+** * WordPress version ** 3.0.1 or higher ** * Tested up to **4.3.34** * Language * [English (US)](https://wordpress.org/plugins/custom-progress-bar/) * Tag * [progressbar](https://zh-hk.wordpress.org/plugins/tags/progressbar/) * [進階顯示](https://zh-hk.wordpress.org/plugins/custom-progress-bar/advanced/) ## 評分 5 out of 5 stars. * [ 5 5-star reviews ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/?filter=5) * [ 0 4-star reviews ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/?filter=4) * [ 0 3-star reviews ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/?filter=3) * [ 0 2-star reviews ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/?filter=2) * [ 0 1-star reviews ](https://wordpress.org/support/plugin/custom-progress-bar/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/custom-progress-bar/reviews/#new-post) [See all reviews](https://wordpress.org/support/plugin/custom-progress-bar/reviews/) ## 貢獻者 * [ Arif Hassan ](https://profiles.wordpress.org/aarifhsn/) ## 支援 有話想說？需要協助？ [檢視支援論壇](https://wordpress.org/support/plugin/custom-progress-bar/)