Free WordPress progress bar snippet

by

Adding a simple progress bar in WordPress can quickly turn into a full day of testing out different plugins and addons, using complex page builders and fixing compatibility issues.

This simple snippet solves the problem in less than 30 lines of code and is completely free to use. 

add_shortcode('byt_progress_bar', 'byt_progress_bar_shortcode');
function byt_progress_bar_shortcode($atts){
  //[byt_progress_bar title="Tutorial Progress" percent="80"]
	ob_start();
	$percent = $atts['percent'];
	$title = $atts['title'];
	$unique = uniqid('byt_progress_bar');
	?>
		<div class="byt_progress_bar_title"><?php echo $title; ?></div>
		<div class="byt_progress_bar_back">
			<div class="byt_progress_bar_front" style="width:<?php echo $percent;?>%; animation: <?php echo $unique; ?> 1s ease forwards;"><?php echo $percent;?>%</div>
		</div>
<style>
	@keyframes <?php echo $unique; ?> {
    from { width: 0%; }
    to { width: <?php echo $percent;?>%; }
}
</style>
	
<style>	
	/* BYT PROGRESS BAR - */
.byt_progress_bar_back{background-color: rgba(235,235,235,0.5); border-radius: 2px; margin-bottom: 30px;}
.byt_progress_bar_front{text-align: right; padding-right: 15px; background-color: #1d8280; border-radius: 2px; color: #ffffff; font-size:11px; line-height:30px; height:30px}
.byt_progress_bar_title{color: rgba(34, 34, 34, 0.6);  font-size: 12px; text-transform: uppercase; font-weight:900}
</style>

	<?php
	return ob_get_clean();
}

1 thought on “Free WordPress progress bar snippet”

Leave a Comment