Pie Chart

by HYEONGJINKIM

HTML

<script src="http://www.class.pm/projects/jquery/classyloader/js/jquery.classyloader.min.js"></script>
<canvas class="domfam"></canvas>
<canvas class="loader"></canvas>
<canvas class="loader2"></canvas>
<canvas class="loader3"></canvas>
<canvas class="loader4"></canvas>
<canvas class="loader5"></canvas>

CSS

<meta name='viewport' content='initial-scale=1.0, width=device-width' />

JavaScript

$('.domfam').ClassyLoader({
    percentage: 60,
    width : 70,
    height : 70,
    diameter: 30,
    showText: false,
    lineColor: "#3ee3af",
    remainingLineColor: "#e6e8eb",
    lineWidth: 8
});
$('.loader').ClassyLoader();
$('.loader2').ClassyLoader({
    percentage: 60,
    speed: 8,
    diameter: 70,
    showText: false,
    fontSize: '20px',
    roundedLine: true,
    fontColor: 'rgba(73, 125, 164, 0.3)',
    lineColor: 'rgba(73, 125, 164, 1)',
    remainingLineColor: 'rgba(73, 125, 164, 0.1)',
    lineWidth: 40
});
$('.loader3').ClassyLoader({
    speed: 40,
    fontFamily: 'Georgia',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(255,0,0,0.4)',
    lineWidth: 1,
    remainingLineColor: 'rgba(0,0,0,0.1)'
});
$('.loader4').ClassyLoader({
    speed: 20,
    diameter: 30,
    fontSize: '20px',
    fontFamily: 'Georgia',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(0,0,0,0.4)',
    percentage: 34,
    remainingLineColor: 'rgba(0,0,0,0.1)'
});
$('.loader5').ClassyLoader({
    speed: 100,
    diameter: 80,
    fontSize: '30px',
    fontFamily: 'Courier',
    fontColor: 'rgba(0,0,0,0.4)',
    lineColor: 'rgba(0,0,0,0.7)',
    percentage: 80,
    lineWidth: 20,
    remainingLineColor: 'rgba(200,200,200,0.1)'
});