<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>