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>