Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
function make_star_bar( $atts ) {
$value = shortcode_atts( array(
'stars' =>5,
'color' => '#f00'
),$atts);
$percentage = 100 * $value['stars'] / 5;
$html = '<span class="star-bar">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<style>
.star-bar {
background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,0) '. $percentage.'%);
color: rgba(0,0,0,.2);
background-clip: text;
-webkit-background-clip: text;
color: rgba(0,0,0,.2);
}
</style>
';
return $html;
}
add_shortcode('star_bar', 'make_star_bar');
@diggeddy

This comment has been minimized.

Copy link
Owner Author

@diggeddy diggeddy commented Feb 20, 2021

A simple x out of 5 Star Bar.
Basic use with default color #f00:
[star_bar stars="2.6"]

With color attribute:
[star_bar stars="2.6" color="#0000ff"]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment