JSFiddle - React, Tailwind, and code Playground

by l2banners

HTML

<div class="progress" data-online="190"></div>

CSS

.progress {
  height: 192px;
  display: inline-block;
  vertical-align: middle;
  width: 192px;
  left: 27px;
  top: 15px;
}

.progress > svg {
  height: 100%;
  display: block;
}

JavaScript

// Подключаем прогресс бар


$(document).ready(function(e) {
    
	
	$('.progress').each(function(index, element) {
		index = index+1;
		$(element).attr('id','progress'+index);
    });
});


window.onload = function onLoad() {
  
    var circle1 = new ProgressBar.Circle('#progress1', {
        color: '#14AA18', 
        duration: 3000,
        easing: 'easeInOut',		
		    strokeWidth: 10, 
        trailWidth: 10, 
        trailColor: '#eee', 
    });
	circle1.animate($('#progress1').attr('data-online')/100);
	
};



// ProgressBar.js 0.9.0
// https://kimmobrunfeldt.github.io/progressbar.js
// License: MIT

!function(a){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=a();else if("function"==typeof define&&define.amd)define([],a);else{var b;b="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,b.ProgressBar=a()}}(function(){var a;return function b(a,c,d){function e(g,h){if(!c[g]){if(!a[g]){var i="function"==typeof require&&require;if(!h&&i)return i(g,!0);if(f)return f(g,!0);var j=new Error("Cannot find module '"+g+"'");throw j.code="MODULE_NOT_FOUND",j}var k=c[g]={exports:{}};a[g][0].call(k.exports,function(b){var c=a[g][1][b];return e(c?c:b)},k,k.exports,b,a,c,d)}return c[g].exports}for(var f="function"==typeof require&&require,g=0;g<d.length;g++)e(d[g]);return e}({1:[function(b,c,d){(function(){var b=this,e=function(){"use strict";function e(){}function f(a,b){var c;for(c in a)Object.hasOwnProperty.call(a,c)&&b(c)}function g(a,b){return f(b,function(c){a[c]=b[c]}),a}function h(a,b){f(b,function(c){"undefined"==typeof a[c]&&(a[c]=b[c])})}function i(a,b,c,d,e,f,g){var h,i,k,l=f>a?0:(a-f)/e;for(h in b)b.hasOwnProperty(h)&&(i=g[h],k="function"==typeof i?i:o[i],b[h]=j(c[h],d[h],k,l));return b}function j(a,b,c,d){return a+(b-a)*c(d)}function k(a,b){var c=n.prototype.filter,d=a._filterArgs;f(c,function(e){"undefined"!=typeof c[e][b]&&c[e][b].apply(a,d)})}function...