JSFiddle - React, Tailwind, and code Playground

by novisshriv

HTML

<link rel="stylesheet" href="https://rawgit.com/pguso/jquery-plugin-circliful/1.0.2/css/jquery.circliful.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://rawgit.com/pguso/jquery-plugin-circliful/1.0.2/js/jquery.circliful.js"></script>
<section class="container">

    <h3>Circliful</h3>

    <div class="row">
        <div class="col-lg-2">
            <div id="test-circle"></div>
        </div>
        <div class="col-lg-2">
            <div id="test-circle2"></div>
        </div>
        <div class="col-lg-2">
            <div id="test-circle3"></div>
        </div>
        <div class="col-lg-2">
            <div id="test-circle4"></div>
        </div>
        <div class="col-lg-2">
            <div id="test-circle5"></div>
        </div>
    </div>
</section>

JavaScript

$( document ).ready(function() { // 6,32 5,38 2,34
        $("#test-circle").circliful({
            animation: 1,
            animationStep: 5,
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
            percent: 38,
            textSize: 28,
            textStyle: 'font-size: 12px;',
            textColor: '#666',
            multiPercentage: 1,
            percentages: [10, 20, 30]
        });
        $("#test-circle2").circliful({
            animation: 0,
            animationStep: 6,
            foregroundBorderWidth: 5,
            backgroundColor: "none",
            fillColor: '#eee',
            percent: 50,
            iconColor: '#3498DB',
            icon: 'f206',
            iconSize: '40',
            iconPosition: 'middle'
        });
        $("#test-circle3").circliful({
            animation: 1,
            animationStep: 6,
            foregroundBorderWidth: 5,
            backgroundBorderWidth: 1,
            percent: 88,
            iconColor: '#3498DB',
            icon: 'f004',
            iconSize: '40',
            iconPosition: 'middle'
        });
        $("#test-circle4").circliful({
            animation: 1,
            animationStep: 1,
            start: 2,
            showPercent: 1,
            backgroundColor: '#000',
            foregroundColor: '#A8C64A',
            fontColor: '#000',
            multiPercentage: 1,
            text: 'No Kids',
            foregroundBorderWidth: 15,
            backgroundBorderWidth: 15,
        });
        $("#test-circle5").circliful({
          animationStep: 5,
          foregroundBorderWidth: 5,
          backgroundBorderWidth: 15,
          percent: 80,
          halfCircle: 1,
        });
    });