<div class="row align-items-center mb-3 ">
    <div class="col-12 col-md-4 col-lg-3 text-center">
        <div class="height-100 width-100 position-relative d-inline-block mx-auto">
            <div id="circleprogressblue1"></div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3">
        <div class="position-relative">
            <div id="containerLine"></div>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 text-center">
        <div class="height-150 width-150 position-relative d-inline-block mx-auto">
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0px" y="0px" viewBox="0 0 100 100">
                <path fill-opacity="0" stroke-width="1" stroke="#DDDDDD" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z" />
                <path id="heart-path" fill-opacity="0" stroke-width="3" stroke="#FF0000" d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z" />
            </svg>
        </div>
    </div>
    <div class="col-12 col-md-4 col-lg-3 text-center">
        <div class="width-150 position-relative d-inline-block mx-auto">
            <div id="halfcircleprogress"></div>
        </div>
    </div>
</div>

<script>
"use strict";

$(document).ready(function () {
    /* circular progress */
    var progressCirclesblue1 = new ProgressBar.Circle(circleprogressblue1, {
        color: '#015EC2',
        // This has to be the same size as the maximum width to
        // prevent clipping
        strokeWidth: 10,
        trailWidth: 10,
        easing: 'easeInOut',
        trailColor: 'rgba(66, 157, 255, 0.15)',
        duration: 1400,
        text: {
            autoStyleContainer: false
        },
        from: { color: '#015EC2', width: 10 },
        to: { color: '#015EC2', width: 10 },
        // Set default step function for all animate calls
        step: function (state, circle) {
            circle.path.setAttribute('stroke', state.color);
            circle.path.setAttribute('stroke-width', state.width);

            var value = Math.round(circle.value() * 100);
            if (value === 0) {
                circle.setText('');
            } else {
                circle.setText(value + "<small>%<small>");
            }

        }
    });
    // progressCirclesblue1.text.style.fontSize = '20px';
    progressCirclesblue1.animate(0.65);  // Number from 0.0 to 1.0


    var bar = new ProgressBar.Line(containerLine, {
        strokeWidth: 3,
        easing: 'easeInOut',
        duration: 1400,
        color: '#2196f3',
        trailColor: '#eee',
        trailWidth: 1,
        svgStyle: { width: '100%', height: '100%' },
        text: {
            style: {
                // Text color.
                // Default: same as stroke color (options.color)
                color: '#999',
                position: 'absolute',
                right: '0',
                top: '30px',
                padding: 0,
                margin: 0,
                transform: null
            },
            autoStyleContainer: false
        },
        from: { color: '#2196f3' },
        to: { color: '#ffc107' },
        step: (state, bar) => {
            bar.setText(Math.round(bar.value() * 100) + ' %');
        }
    });
    bar.animate(0.85);  // Number from 0.0 to 1.0

    var bar = new ProgressBar.Path('#heart-path', {
        easing: 'easeInOut',
        duration: 1400
    });
    bar.set(0);
    bar.animate(1.0);  // Number from 0.0 to 1.0

    var bar = new ProgressBar.SemiCircle(halfcircleprogress, {
        strokeWidth: 6,
        color: '#ffc107',
        trailColor: '#DDDDDD',
        trailWidth: 4,
        easing: 'easeInOut',
        duration: 1400,
        svgStyle: null,
        text: {
            value: '',
            alignToBottom: false
        },
        from: { color: '#ffc107' },
        to: { color: '#4caf50' },
        // Set default step function for all animate calls
        step: (state, bar) => {
            bar.path.setAttribute('stroke', state.color);
            var value = Math.round(bar.value() * 100);
            if (value === 0) {
                bar.setText('');
            } else {
                bar.setText(value);
            }

            bar.text.style.color = state.color;
        }
    });
    bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
    bar.text.style.fontSize = '2rem';

    bar.animate(0.85);  // Number from 0.0 to 1.0

});

</script>