Star Bar Shortcode

function make_star_bar( $atts ) {
    $value = shortcode_atts( array(
      'stars' =>5,
      'color' => '#f00'
    ),$atts);
    $prefix = 'star-bar-';
    $uniqueClass = uniqid($prefix);
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="'.$uniqueClass.'">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <style>
    .'.$uniqueClass.' {
        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');

I implemented Rating Schema, here:

function make_star_bar($atts)
{
    $value = shortcode_atts(array(
        'stars' => 5,
        'color' => '#f00'
    ), $atts);
    $prefix = 'star-bar-';
    $uniqueClass = uniqid($prefix);
    $percentage = 100 * $value['stars'] / 5;
    $html = '<span class="' . $uniqueClass . '">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
<style>
	.' . $uniqueClass . ' {
		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>
<script type="application/ld+json">
	{
		"@context": "https://schema.org",
		"@type": "Rating",
		"ratingValue": ' . $value['
		stars '] . ',
		"bestRating": "5",
		"worstRating": "1"
	}
</script>
';
    return $html;
}
add_shortcode('star_bar', 'make_star_bar');

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"]

Can we implement this to block template with dynamic data? I have a rating field as a ACF custom field, I can display rating number but I want to show star rating. How can I feed the rating from dynamic data?

EDIT:
I found the solution, GeneratePress is amazing! 🎉
My custom field name is "rating". It's magic:

function make_star_bar( $atts ) {
	$rating_term = get_field('rating');
	$value = shortcode_atts( array(
		'stars' => $rating_term,
		'color' => 'orange'
	),$atts);
	$prefix = 'star-bar-';
	$uniqueClass = uniqid($prefix);
	$percentage = 100 * $value['stars'] / 5;
	$html = '<strong>'.$value['stars'].'/5</strong>
	<span class="'.$uniqueClass.'">&#9733;&#9733;&#9733;&#9733;&#9733;</span>
    <style>
    .'.$uniqueClass.' {
        background: linear-gradient(90deg, '. $value['color'] . ' ' . $percentage .'%, rgba(0,0,0,1) '. $percentage.'%);
        color: rgba(0,0,0,0);
        background-clip: text;
        -webkit-background-clip: text;
    }
    </style>
	<script type="application/ld+json">
		{
		  "@context": "https://schema.org",
		  "@type": "Rating",
		  "ratingValue": '.$value['stars'].',
		  "bestRating": "5",
		  "worstRating": "1"
		}
	</script>
    ';
	return $html;
}
add_shortcode('star_bar', 'make_star_bar');

Hi Gentlemen. I came looking for this and I found it! Question--where do I add this code? I know how to reference the shortcode on my post. Do I create an element with the code? And the element would be a shortcode?

@Sparkledump the code is PHP.
If you're using a Child Theme, then add it to the Child theme functions.php
If you're not, then use the Code Snippets plugin to add the code to a new snippet

@buraste very nice :)

hey guys, one question. so i need to use shortcode with star value on every of my post? Because the data input from ACF is not showing