# powerkit/trunk/modules/basic-elements/templates/progressbars.php

Powerkit – Supercharge your WordPress Site, version trunk. 129 lines.

- Page: https://pluginprobe.com/plugins/powerkit/trunk/code/modules/basic-elements/templates/progressbars.php
- Raw: https://pluginprobe.com/plugins/powerkit/trunk/raw/modules/basic-elements/templates/progressbars.php
- Modified: 2026-07-31T07:59:46+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/powerkit/trunk/code/modules/basic-elements/templates/progressbars.php#L10-L20`.

```php
<?php
/**
 * Shortcode Progress Bars config
 *
 * @package    Powerkit
 * @subpackage Templates
 */

// Exit if accessed directly.
if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

/**
 * Progress Bars
 */
add_action( 'init', function () {
	powerkit_basic_shortcodes_register( array(
		'name'         => 'progressbars',
		'title'        => esc_html__( 'Progress Bars', 'powerkit' ),
		'priority'     => 60,
		'base'         => 'powerkit_progressbar',
		'autoregister' => true,
		'fields'       => array(
			array(
				'type'  => 'section',
				'label' => esc_html__( 'Options', 'powerkit' ),
			),
			array(
				'type'    => 'input',
				'name'    => 'value',
				'label'   => esc_html__( 'Value', 'powerkit' ),
				'default' => '25',
				'suffix'  => ' %',
				'desc'    => '(0-100)',
			),
			array(
				'type'  => 'section',
				'label' => esc_html__( 'Style', 'powerkit' ),
			),
			array(
				'type'    => 'input',
				'name'    => 'height',
				'label'   => esc_html__( 'Height (thickness)', 'powerkit' ),
				'default' => '20',
				'suffix'  => ' px',
			),
			array(
				'type'    => 'radio',
				'name'    => 'color',
				'label'   => esc_html__( 'Color', 'powerkit' ),
				'style'   => 'vertical',
				'default' => 'primary',
				'options' => array(
					'primary'   => esc_html__( 'Primary', 'powerkit' ),
					'secondary' => esc_html__( 'Secondary', 'powerkit' ),
					'success'   => esc_html__( 'Success', 'powerkit' ),
					'info'      => esc_html__( 'Info', 'powerkit' ),
					'warning'   => esc_html__( 'Warning', 'powerkit' ),
					'danger'    => esc_html__( 'Danger', 'powerkit' ),
				),
			),
			array(
				'type'    => 'checkbox',
				'name'    => 'display_value',
				'label'   => esc_html__( 'Display value', 'powerkit' ),
				'default' => false,
			),
			array(
				'type'    => 'checkbox',
				'name'    => 'striped',
				'label'   => esc_html__( 'Striped', 'powerkit' ),
				'default' => false,
			),
			array(
				'type'    => 'checkbox',
				'name'    => 'animated',
				'label'   => esc_html__( 'Animated', 'powerkit' ),
				'default' => false,
			),
		),
	) );
});

/**
 * Progress Bar Shortcode
 *
 * @param array  $output    Shortcode HTML.
 * @param array  $atts      User defined attributes in shortcode tag.
 * @param string $content   Shorcode tag content.
 * @return string           Shortcode result HTML.
 */
function powerkit_basic_shortcodes_progressbar( $output, $atts, $content ) {

	// Value.
	$atts['value'] = ( is_numeric( $atts['value'] ) && $atts['value'] > 100 ) ? 100 : $atts['value'];

	// Display value.
	$display_value = ( 'true' === $atts['display_value'] ) ? esc_html( $atts['value'] ) . '%' : '';

	// Striped and animated.
	$class  = 'pk-progress-bar';
	$class .= ( 'true' === $atts['striped'] ) ? ' pk-progress-bar-striped' : '';
	$class .= ( 'true' === $atts['animated'] ) ? ' pk-progress-bar-animated' : '';

	// Color.
	$class .= ' pk-bg-' . sanitize_html_class( $atts['color'] );

	// Dimensions. Both are cast to a number so they can never break out of the
	// style attribute. A non-numeric value drops the declaration, which is how
	// a browser already treats an invalid one.
	$height_css = is_numeric( $atts['height'] ) ? sprintf( 'height: %spx;', (float) $atts['height'] ) : '';
	$width_css  = is_numeric( $atts['value'] ) ? sprintf( 'width: %s%%;', (float) $atts['value'] ) : '';

	$output = sprintf(
		'<div class="pk-progress" style="%2$s">
			<div class="%1$s" role="progressbar" style="%3$s" aria-valuenow="%4$s" aria-valuemin="0" aria-valuemax="100">%5$s</div>
		</div>',
		esc_attr( $class ),
		esc_attr( $height_css ),
		esc_attr( $width_css ),
		esc_attr( $atts['value'] ),
		$display_value
	);

	return $output;
}
add_filter( 'powerkit_progressbar_shortcode', 'powerkit_basic_shortcodes_progressbar', 10, 3 );

```