Percentage Circle block - Block to display a percentage circle with animation. Based on: https://codepen.io/sergiopedercini/pen/jmKdbj - https://www.damiencarbery.com/2020/11/percentage-circle-block/

acf-percentage-circle.php

<?php
/*
Plugin Name: ACF - Percentage Circle
Plugin URI: https://www.damiencarbery.com/2020/11/percentage-circle-block/
Description: Block to display a percentage circle with animation. Based on: https://codepen.io/sergiopedercini/pen/jmKdbj
Author: Damien Carbery
Version: 0.1
*/


// Register a slider block.
add_action('acf/init', 'register_percentage_circle_block');
function register_percentage_circle_block() {
    if( function_exists('acf_register_block_type') ) {
        // register the Percentage Circle block.
        acf_register_block_type(array(
            'name'              => 'percentage-circle',
            'title'             => __('Percentage Circle'),
            'description'       => __('Percentage Circle with custom percentage, colour and text.'),
            'render_template'   => plugin_dir_path( __FILE__ ) . 'percentage-circle.php',
            'category'          => 'formatting',
            'icon'                 => 'update',
            'enqueue_assets'     => function(){
                wp_enqueue_style( 'percentage-circle', plugin_dir_url( __FILE__ ) . 'percentage-circle.css', array(), null );
            },
            'supports' => array( 'align' => false, ), // Alignment is not applicable for this block.
        ));
    }

    // Load the field group
    if ( function_exists( 'acf_add_local_field_group' ) ) {
        acf_add_local_field_group(array(
            'key' => 'group_5fa570775ee49',
            'title' => 'Block: Percentage Circle',
            'fields' => array(
                array(
                    'key' => 'field_5fa570806e94c',
                    'label' => 'Percentage',
                    'name' => 'percentage',
                    'type' => 'number',
                    'required' => 1,
                    'min' => 0,
                    'max' => 100,
                    'step' => '',
                ),
                array(
                    'key' => 'field_5fa5709d6e94d',
                    'label' => 'Colour',
                    'name' => 'colour',
                    'type' => 'color_picker',
                    'instructions' => 'Colour for the progress portion of the circle.',
                    'required' => 1,
                    'default_value' => '#2a9bd9',
                ),
                array(
                    'key' => 'field_5fa570da6e94e',
                    'label' => 'Text',
                    'name' => 'text',
                    'type' => 'text',
                    'instructions' => 'Very short amount of text to be displayed inside the circle. If not specified it will be the percentage with "%" appended.',
                    'required' => 0,
                    'maxlength' => 10,
                ),
            ),
            'location' => array(
                array(
                    array(
                        'param' => 'block',
                        'operator' => '==',
                        'value' => 'acf/percentage-circle',
                    ),
                ),
            ),
        ));
    }
}

percentage-circle.css

.circular-chart { display: block; margin: 10px auto; max-width: 80%; max-width: 250px; max-height: 250px; }
.circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; }
.circle { fill: none; stroke-width: 2.8; stroke-linecap: round; animation: progress 2s ease-out forwards; }
@keyframes progress { 0% { stroke-dasharray: 0 100; } }
.percentage { fill: #666; font-size: 0.5em; text-anchor: middle; }

percentage-circle.php

<?php
/**
 * Percentage Circle Block Template.
 *
 * @param   array $block The block settings and attributes.
 * @param   string $content The block inner HTML (empty).
 * @param   bool $is_preview True during AJAX preview.
 * @param   (int|string) $post_id The post ID this block is saved to.
 */

// Create class attribute allowing for custom "className" value.
$className = 'percentage-circle';
if( !empty($block['className']) ) {
    $className .= ' ' . $block['className'];
}
if( $is_preview ) {
    $className .= ' is-admin';
}

$percentage = abs( intval( get_field( 'percentage' ) ) );
$colour = get_field( 'colour' );
$text = get_field( 'text' );
if ( empty( $text ) ) {
	$text = $percentage . '%';
}

?>
<svg viewBox="0 0 36 36" class="circular-chart <?php echo esc_attr($className); ?>">
      <path class="circle-bg"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <path class="circle" stroke="<?php echo $colour; ?>"
        stroke-dasharray="<?php echo $percentage; ?>, 100"
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
      />
      <text x="18" y="20.35" class="percentage"><?php echo $text; ?></text>
</svg>