Pie componentAvailable since EcoComposer 2.0

Pie examples
Default SCSS values
SCSS implementation
HTML implementation

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

"conic-gradient" method

The default values are :

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>