text: /* Examples */
  (function($) {
  
    $('.first.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.1,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.second.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.2,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.third.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.3,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.fourth.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.4,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.fifth.technical.circle').circleProgress({
      startAngle: -Math.PI/2 ,
      value: 0.5,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.sixth.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.6,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.seventh.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.7,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.eighth.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.8,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.ninth.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.9,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.tenth.technical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 1.0,
      animation: false,
      lineCap: 'round',
      fill: {color: 'tomato'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
  
    $('.first.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.1,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.second.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.2,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.third.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.3,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.fourth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.4,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.fifth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.5,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.sixth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.6,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.seventh.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.7,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.eighth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.8,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.ninth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 0.9,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    $('.tenth.nontechnical.circle').circleProgress({
      startAngle: -Math.PI/2,
      value: 1.0,
      animation: false,
      lineCap: 'round',
      fill: {color: '#555'},
      size: 70
    }).css("width", "70px").css("margin", "10px").css("vertical-align", "text-top");;
  
    // $('.second.circle').circleProgress({
    //   value: 0.6
    // }).on('circle-animation-progress', function(event, progress) {
    //   $(this).find('strong').html(Math.round(100 * progress) + '<i>%</i>');
    // });
    //
    //
    // $('.third.circle').circleProgress({
    //   value: 0.75,
    //   fill: {gradient: [['#0681c4', .5], ['#4ac5f8', .5]], gradientAngle: Math.PI / 4}
    // }).on('circle-animation-progress', function(event, progress, stepValue) {
    //   $(this).find('strong').text(stepValue.toFixed(2).substr(1));
    // });
    //
    //
    // var c4 = $('.forth.circle');
    //
    // c4.circleProgress({
    //   startAngle: -Math.PI / 4 * 3,
    //   value: 0.5,
    //   lineCap: 'round',
    //   fill: {color: '#ffa500'}
    // });
    //
    //
    // // Let's emulate dynamic value update
    // setTimeout(function() { c4.circleProgress('value', 0.7); }, 1000);
    // setTimeout(function() { c4.circleProgress('value', 1.0); }, 1100);
    // setTimeout(function() { c4.circleProgress('value', 0.5); }, 2100);
    //
    //
    // $('.fifth.circle').circleProgress({
    //   value: 0.7
    //
    // });
  })(jQuery);
  