Circled percentage componentAvailable since EcoComposer 2.2

Circled percentage examples
Default SCSS values
SCSS implementation
HTML implementation

Classical Circled percentage examples :

Performance Metrics for 2023

Marketing success

Team collaboration

System reliability

Client retention rate

The default values are :

font-family : '',
font-size : 2rem * theming.$font-size,
delay : 2s,
duration : 2s,
circled-percentage--color : 'circled-percentage--color',
circled-percentage--empty-circle-box-shadow : 'circled-percentage--empty-circle-box-shadow',
circled-percentage--full-circle-box-shadow : 'circled-percentage--full-circle-box-shadow',
max-value : 75,
print : false,
size : 100px,
suffix : '',
themes :  (
  light : (
    default--circled-percentage--color : #333,
    default--circled-percentage--empty-circle-box-shadow : inset 0 0 0 10px #ccc,
    default--circled-percentage--full-circle-box-shadow : inset 0 0 0 10px #064,
  ),
  dark : (
    default--circled-percentage--color : #ccc,
    default--circled-percentage--empty-circle-box-shadow : inset 0 0 0 10px #ccc,
    default--circled-percentage--full-circle-box-shadow : inset 0 0 0 10px #5ab,
  )
)

We can implement it that way :

// To create two 'Circled percentage' components ...
@include circledPercentage.init();
@include circledPercentage.create();
@include circledPercentage.create(
  (
    font-family : "'Courier', sans-serif",
    themes : $themes,
    suffix : '-2'
  )
);

We can implement it that way :

<div class="circled-percentage main suffix" data-percentage=75>
  <div class="circled-percentage counter suffix">%</div>
  <div class="circled-percentage shape suffix"></div>
</div>