The animated skills diagram style can be customized from scss > eleemnts > _skillsDiagram.scss

Also the diagram is initialized from modules/AnimatedSkillsDiagram/js/init.js

The diagram use the following sintax:

<div class="cg__skillsDiagram cg__skillsDiagram--style1"> 
  <div id="content">
    <div class="legend">
      <h1>Legend:</h1>
      <div class="skills">
        <ul>
          <li class="skill1">Intrinsicly disintermediate</li>
          <li class="skill2">[...]</li>
          <li class="skill3">[...]</li> 
        </ul> 
      </div><!--/.skills-->
    </div><!--/.legend--> 
    <div id="diagram"></div>
  </div><!--/.content-->
  <div class="get"> 
    <div class="arc"> 
      <span class="text">Intrinsicly disintermediate</span>
      <input type="hidden" class="percent" value="57" /> 
      <input type="hidden" class="color" value="#60b1d5" />
    </div><!--/.arc-->
    <div class="arc">[...]</div><!--/.arc--> 
    <div class="arc">[...]</div><!--/.arc--> 
  </div><!--/.get-->
</div><!--/.cg__skillsDiagram-->

The diagram skills colors and percent can be customized by changing the “background-color” rule and “data-percent” attribute.

<div class="skills_list">
  <ul>
    <li class="skill1" data-percent="57" style="background-color:#60b1d5">Intrinsicly disintermediate</li>
    <li class="skill2" data-percent="77" style="background-color:#2297cd">Globally cultivate</li>
    <li class="skill3" data-percent="83" style="background-color:#742bad">Distinctively restore</li>
  </ul>
</div> <!--/.skills-->

You can find more regarding this element at: https://tympanus.net/codrops/2011/04/22/animated-skills-diagram/