# Progress Bar Shortcode

> Adds a [wpide_progress value="75" label="Funding goal"] shortcode that draws a labeled progress bar, for fundraising goals, skills or project status.

- Type: PHP
- Runs: Run everywhere
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: progress, shortcode, statistics
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-progress-bar-shortcode/

## Code

```php
add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'wpide-progress', false, array(), '1.0' );
    wp_add_inline_style( 'wpide-progress', '.wpide-progress{margin:1em 0;}.wpide-progress__head{display:flex;justify-content:space-between;gap:1em;font-size:.9em;margin-bottom:.35em;}.wpide-progress__track{height:12px;border-radius:999px;background:rgba(0,0,0,.08);overflow:hidden;}.wpide-progress__bar{height:100%;border-radius:inherit;background:var(--wpide-progress-color,#2271b1);width:var(--wpide-progress,0%);}@media (prefers-reduced-motion:no-preference){.wpide-progress__bar{animation:wpide-progress-fill 1.2s ease-out both;}}@keyframes wpide-progress-fill{from{width:0;}}' );
} );

add_shortcode( 'wpide_progress', function ( $atts ) {
    $atts  = shortcode_atts( array( 'value' => 0, 'max' => 100, 'label' => '', 'color' => '' ), $atts, 'wpide_progress' );
    $max   = max( 1, (float) $atts['max'] );
    $value = min( $max, max( 0, (float) $atts['value'] ) );
    $pct   = round( $value / $max * 100, 1 );
    $color = sanitize_hex_color( $atts['color'] );

    wp_enqueue_style( 'wpide-progress' );

    return sprintf(
        '<div class="wpide-progress" style="--wpide-progress:%1$s%%;%2$s"><div class="wpide-progress__head"><span>%3$s</span><span>%4$s%%</span></div><div class="wpide-progress__track" role="progressbar" aria-valuemin="0" aria-valuemax="%5$s" aria-valuenow="%6$s"%7$s><div class="wpide-progress__bar"></div></div></div>',
        esc_attr( $pct ),
        $color ? '--wpide-progress-color:' . esc_attr( $color ) . ';' : '',
        esc_html( $atts['label'] ),
        esc_html( number_format_i18n( $pct, $pct == (int) $pct ? 0 : 1 ) ), // phpcs:ignore Universal.Operators.StrictComparisons
        esc_attr( $max ),
        esc_attr( $value ),
        $atts['label'] ? ' aria-label="' . esc_attr( $atts['label'] ) . '"' : ''
    );
} );
```

## Notes

Add color="#16a34a" to change the bar color. The bar fills with a short animation unless the visitor prefers reduced motion.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Progress Bar Shortcode" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/