=== Progress Bar === Contributors: wpbranddigital25, freemius Tags: block, progress, progress-bar, bar, gutenberg Requires at least: 6.3 Tested up to: 6.9 Stable tag: 1.1.1 Requires PHP: 7.2 License: GPLv2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html A beautiful and lightweight progress bar block for the WordPress Gutenberg editor with smooth animations and full customization options. == Description == The **Progress Bar** block is a simple yet powerful tool for displaying progress, statistics, skills, or any percentage-based data on your WordPress site. Built with modern web standards, this block offers smooth animations and a clean, professional appearance. Whether you need a simple skill bar, an animated number counter, a circular radial ring, or a full skills section β€” WBD Progress Bar has you covered. ### πŸ†“ Free Features **Display Modes** * **Single Bar** – Classic horizontal progress bar with full customization * **Number Counter** – Animated count-up effect with prefix, suffix, and optional bar below **Style Variations** * Thin (6px), Medium (12px), Thick (20px), Striped (animated), Circle (SVG ring) **10 One-Click Template Styles** Ocean Blue, Sunset Fire, Forest Green, Purple Galaxy, Golden Hour, Midnight Dark, Rose Pink, Arctic Ice, Corporate Gray, Lemon Lime **Customization** * Progress percentage control (0–100) * Custom fill & track colors * Gradient fill (two-color gradient) * Bar corner radius control (square to pill) * Bar height control (6px–40px) * Optional percentage text display * Percentage position β€” Inside bar / Outside right / Above bar * Label position β€” Above / Below / Inline row * Inline gap control (when label is inline) * Milestone marker with custom label * Scroll-triggered animation (IntersectionObserver) * Animation type β€” Ease, Ease In, Ease Out, Ease In Out, Linear, Bounce, Elastic * Animation duration control * Typography control β€” Font family & font size for label and percentage text * Fully responsive design * Full Site Editor (FSE) support * Accessible design with semantic HTML --- ### ⚑ Pro Features **Display Modes (Pro)** * **Circular / Radial Progress Bar** – Beautiful SVG ring-style progress with 10 themes, custom size, stroke width, center text, and optional label * **Group / Skills Section** – Display multiple progress bars together as a skills list with individual labels, colors, and percentages; flexible label & percentage positioning **Single Bar (Pro)** * **Hover Tooltip** – Show a custom tooltip message when hovering over the bar πŸ‘‰ **[Upgrade to Pro](https://checkout.freemius.com/plugin/26261/plan/43458/licenses/1/)** --- **Perfect For:** * Skill & competency display * Project completion indicators * Goal tracking & fundraising * Statistics & data visualization * Survey results & polls * Resume / portfolio pages The block provides an intuitive editing experience with sidebar controls for adjusting the percentage (0–100), customizing colors, toggling percentage text visibility, and selecting from predefined style variations. == Why Use WBD Progress Bar? == Most progress bar plugins are either too bloated with unnecessary features or too simple to be actually useful. WBD Progress Bar is built differently: **πŸš€ Performance First** The block outputs pure static HTML and CSS β€” no jQuery, no heavy JavaScript libraries. The frontend script only loads when your block is actually on the page, keeping your site fast. **🎨 Visual Flexibility** Four display modes, five style variations, ten one-click templates, gradient fill, custom radius, custom height, and full color control β€” all without touching a single line of code. **🧩 Built for Gutenberg** This is a native WordPress block, not a shortcode or widget. It works seamlessly inside the block editor, Full Site Editor (FSE), reusable blocks, and block patterns. **πŸ“± Responsive by Default** Every mode β€” single bar, counter, circular, group β€” adapts automatically to mobile, tablet, and desktop screens without extra configuration. **⚑ Scroll Animation Without a Plugin** Built-in IntersectionObserver-based scroll trigger animates your bars when they come into view. No extra animation plugin needed. **πŸ”’ Honest Free vs Pro** The free version is genuinely useful β€” single bars, counters, templates, animations, and all customization options are free. Pro unlocks circular/radial rings, grouped skill sections, and hover tooltips for power users. == How To Use == **Step 1 β€” Add the Block** Open any post, page, or template in the WordPress editor. Click the **+** block inserter button, search for **"Progress Bar"**, and click to insert the WBD Progress Bar block. --- **Step 2 β€” Choose a Display Mode** In the right sidebar, find the **Block Mode** panel at the top. Select one of four modes: * **Single Bar** β€” A classic horizontal progress bar. Best for individual skills, project completion, or goal tracking. * **Number Counter** β€” An animated number that counts up on scroll. Great for statistics pages ("500+ clients", "$1M+ revenue"). * **Circular / Radial** *(Pro)* β€” A circular SVG ring progress indicator. Perfect for dashboards or visual KPI displays. * **Group / Skills Section** *(Pro)* β€” Multiple bars stacked together. Ideal for resume skills sections or comparison lists. --- **Step 3 β€” Apply a Template (Optional)** Open the **Template Styles** panel and click any of the 10 preset templates to instantly apply a complete color scheme and style. You can fine-tune colors individually after applying a template. --- **Step 4 β€” Customize Settings** Depending on your selected mode, configure the following panels: * **Progress Settings** β€” Set percentage, height, radius, label text, label position, and percentage position. * **Animation** β€” Choose animation type (ease, bounce, elastic), set duration, and enable scroll-triggered animation. * **Milestone & Tooltip** β€” Add a milestone marker at any percentage point with a custom label. *(Hover Tooltip is Pro)* * **Typography** β€” Set font family and font size for the label and percentage text independently. * **Color Settings** β€” Set fill color, track color, label color, and percentage text color. Enable gradient fill to use two colors. --- **Step 5 β€” Using the Number Counter** Switch to **Number Counter** mode. Set: * **Target Number** β€” The final value to count up to (e.g. 1500). * **Prefix** β€” Text before the number (e.g. `$`). * **Suffix** β€” Text after the number (e.g. `+` or `%`). * **Label** β€” A description shown below the number (e.g. "Happy Clients"). * **Show Progress Bar Below** β€” Toggle to add a bar underneath the counter. The counter animates automatically on page load, or enable **Animate on Scroll** so it only starts when the user scrolls to it. --- **Step 6 β€” Using Group / Skills Section** *(Pro)* Switch to **Group / Skills Section** mode. In the sidebar: 1. Each bar item has its own **Label**, **Percentage**, and **Bar Color**. 2. Click **+ Add Bar** to add more items (no limit). 3. Click **βœ•** to remove any item. 4. Set **Label Position** β€” Above bar (with optional percentage on the same line) or Inline row. 5. Set **Percentage Position** β€” Inside bar / Outside right / Same line as label. 6. Adjust **Gap Between Bars** and **Inline Gap** sliders to control spacing. --- **Step 7 β€” Using Circular / Radial Mode** *(Pro)* Switch to **Circular / Radial** mode. In the sidebar: 1. Choose one of the **10 circular themes** by clicking the theme thumbnail. 2. Adjust **Size** (80–300px) and **Stroke Width** (3–20px). 3. Set the **Progress Percentage**. 4. Toggle **Show Label Below** to display a text label under the ring. 5. Fine-tune **Stroke Color**, **Track Color**, and **Center Text Color** individually. --- **Step 8 β€” Publish** Click **Publish** or **Update**. The block renders as clean, static HTML on the frontend with no extra requests or render-blocking scripts. --- = Where can I get support? = Visit our [contact page](https://www.wpbranddigital.org/contact/) for support. == Installation == 1. Upload the plugin folder to `/wp-content/plugins/wbd-progress-bar`. 2. Activate the plugin through the β€œPlugins” screen in WordPress. 3. Add the **WBD Progress Bar** block to any post/page from the block inserter. 4. Customize the percentage, colors, and style from the block sidebar. == Frequently Asked Questions == = Can I customize the colors? = Yes! The block includes color pickers for the progress fill and background track so you can match your site’s design. = How do I change the progress percentage? = Use the β€œProgress Percentage” number control in the block sidebar. Enter any value from 0 to 100. = Can I hide the percentage text? = Yes, there is a sidebar toggle named β€œShow Percentage Text” that lets you hide or display the percentage. = What are the style variations? = The block includes three variations: * **Thin** – 6px height for subtle displays * **Medium** – 12px (default) * **Thick** – 20px for a bold look = Is the block responsive? = Yes! The progress bar automatically adapts to all screen sizes. = Does it work with the Full Site Editor? = Absolutely. The block works with both the post editor and the Full Site Editor (FSE). == Screenshots == 1. Progress Bar block with sidebar controls. 2. Style variations (Thin, Medium, Thick). 3. Custom color combinations. 4. Percentage text inside the bar. 5. Mobile responsive view. == Changelog == = 1.1.0 = * New: Progress Name / Label text control. * New: Circular / Radial Progress Bar mode with 10 themes (Pro). * New: Group / Skills Section mode β€” multiple bars in one block (Pro). * New: Number Counter mode with animated count-up, prefix & suffix. * New: Hover Tooltip on progress bar (Pro). * New: 10 one-click Template Styles (Ocean Blue, Sunset Fire, Forest Green, etc.). * Milestone marker and scroll animation settings. = 1.0.0 = * Initial release. * Progress percentage control (0–100). * Custom fill and track colors. * Optional percentage text display. * Three style variations (Thin, Medium, Thick). * Smooth transition animations. * Fully responsive design. * Static block with clean HTML output. == Upgrade Notice == = 1.0.0 = Initial release of the WBD Progress Bar block.