https://mahstudio.github.io/js/circle-active.js

1;(function($) {
2    "use strict";
3  
4
5    
6    function initSkillBars() {
7		var el = $('.circle_progress');
8
9		if (el.length) {
10			el.each(function() {
11				var $this = $(this),
12					inner = $this.find('.circle_progress_inner'),
13					percentage = $this.attr('data-percentage') + '%';
14				if ($this.hasClass('circular')) {
15                    var dataparcent = $this.attr('data-percentage');
16					var progress = inner.circleProgress({
17						value: 0,
18						size:175,
19						thickness: $this.data('thickness'),
20						startAngle: Math.PI * -0.501411705537642,
21						emptyFill: $this.data('empty-fill'),
22						animation: {duration: 1100},
23						reverse: ($this.data('inverse') == false) ? false : false,
24						fill: {
25							gradient: [$this.data('start-color'), $this.data('end-color')],
26							gradientAngle: Math.PI * 3.501411705537642
27						}
28					}).on('circle-animation-progress', function(event, progress) {
29                $(this).find('strong').html(Math.round(dataparcent * progress) + '<i>%</i>');
30              });
31					progress.on('circle-animation-progress', function(e, p, v) {
32						var progressBarInner = $(this),
33							instance = progressBarInner.data('circle-progress'),
34							size = instance.size,
35							thickness = instance.getThickness(),
36							radius = size / 2 - thickness / 2,
37							angle = 2 * v * Math.PI + instance.startAngle,
38							x = radius * Math.cos(angle),
39							y = radius * Math.sin(angle);
40							
41						progressBarInner.parent().siblings().find('.percentage').text(parseInt(p * parseInt(percentage), 10), 10);
42						progressBarInner.parents('.style-polygon').find('.percentage').css({
43							left: x + size / 2 - 10,
44							top: y + size / 2 - 11 
45						})
46					});
47				};
48				$this.one('inview', function(event, visible) {
49					if (visible) {
50						if ($this.not('.circular').find('.percentage').length) {
51							$this.find('.percentage').countTo({
52								from: 0,
53								to: parseInt(percentage, 0),
54								speed: 900,
55								refreshInterval: 5
56							}).end().addClass('animated');
57						};
58						if ($this.hasClass('horizontal')) {
59							inner.width(percentage);
60						} else if ($this.hasClass('vertical')) {
61							inner.height(percentage);
62						};
63						if ($this.hasClass('circular')) {
64							inner.circleProgress({value: parseInt(percentage, 10) / 100});
65						};
66					};
67				});
68			});
69		};
70	};
71    
72    initSkillBars();
73    
74    
75})(jQuery)