Circled percentage componentAvailable since EcoComposer 2.2

Classical Circled percentage examples :

The defaults 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 :