Circled percentage componentAvailable since EcoComposer 2.2

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>
^