<div class="col-md-4">
    <div class="progress-overlay">
        <div id="progressbar-first" class="progressbar">
            <span class="online" id="online1"></span>
            <p class="progressbar-text"><span>Online</span>
                Server ExGames x35</p>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function() {
        var online;
        document.getElementById('online1').innerHTML='';
        document.getElementById('online1').innerHTML=1;


        var online1;
        var startColor = '#7fc51a';
        var endColor = 'rgba(255,123,0,1)';
        var optsGradient = {
            from: { color: startColor},
            to: { color: endColor}
        };
        var optsBar = {
            color: startColor,
            strokeWidth: 12.25,
            trailWidth: 0,
            duration: 0,
            easing: 'linear',
            text: {
                value: "",
                autoStyle: false
            }
        };
        var optsBarGradient = {
            color: startColor,
            strokeWidth: 12.25,
            trailWidth: 0,
            duration: 0,
            easing: 'linear',
            text: {
                value: "",
                autoStyle: false
            },
// Set default step function for all animate calls
            step: function(state, circle) {
                circle.path.setAttribute('stroke', state.color);
            }
        };

//online1 = document.getElementById('online1').innerText / 100 / 100;
        online1 = 1/200;
        var first = new ProgressBar.Circle('#progressbar-first', optsBar);
        first.animate(online1, function() {
            first.animate(online1);
        });


    });
</script>

