Pie componentAvailable since EcoComposer 2.0

Complex method with "clip-path", transforms and classic gradients

"conic-gradient" method, a not totally cross-browser solution yet.

The default values are (themes are not handled internally for this component yet):

'font-size' : 16px,
'text' : 'true',
'suffix' : '',
'themes' : (
  'light' : (
  ),
  'dark' : (
  )
)

We can implement it that way :

@include pie.init-classic; // only for classic pie, not conic ones
@include pie.create(
  (
    'themes' : $themes,
    'slices' : (
      (
        'value' : 10,
        'radial-gradient' : #f00,
        'color' : #fff
      ),
      (
        'value' : 25,
        'radial-gradient' : #0f0
      ),
      (
        'value' : 15,
        'radial-gradient' : #00f,
        'color' : #fff
      ),
      (
        'value' : 20,
        'radial-gradient' : #0aa,
        'color' : #fff
      ),
      (
        'value' : 30,
        'radial-gradient' : #aaf
      )
    )
  )
);

We can implement it that way :

<div class="pie suffix"> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> <div class="pie--segment suffix"></div> </div>