https://secure.openum.ca/assets/themes/forceblanche/js/progressbar.js?1728657094

1(function($) {
2
3	jQuery.fn.progressBar = function( options ) {
4
5		//Default values for progress_bar
6		var defaults = {
7			height : "30",
8			// backgroundColor : "#E0E0E0",
9			barColor : "#F97352",
10			targetBarColor : "#CCC",
11			percentage : true,
12			shadow : false,
13			border : false,
14			animation : false,
15			animateTarget : false,
16		};
17
18		var settings = $.extend( {}, defaults, options );
19
20		return this.each( function() {
21			var elem = $( this );
22			$.fn.replaceProgressBar( elem, settings );
23		});
24	};
25
26	$.fn.replaceProgressBar = function( item, settings ) {
27		// var skill		= item.text();
28		var progress	= item.data( 'width' );
29		// var target		= item.data ( 'target' );
30		var bar_classes = ' ';
31		var animation_class = '';
32		 var bar_styles	= 'height:' + settings.height + 'px;';
33		// var bar_styles	= '';
34		if ( settings.shadow ) { bar_classes += 'shadow'; }
35		if ( settings.border ) { bar_classes += ' border'; }
36		if ( settings.animation ) { animation_class = ' animate'; }
37
38		var overlay = '<div class="sonny_progressbar' + animation_class + '" data-width="' + progress + '">';
39		// overlay += '<p class="title">' + skill + '</p>';
40		overlay += '<div class="bar-container' + bar_classes + '" style="' + bar_styles + '">';
41
42		// Render the progress bar background
43		overlay += '<span class="backgroundBar"></span>';
44
45		// Display target bar only if set
46		// if ( target ) {
47		// 	if ( settings.animateTarget ) {
48		// 		overlay += '<span class="targetBar loader" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>';
49		// 	}
50		// 	else {
51		// 		overlay += '<span class="targetBar" style="width:' + target + '%;background-color:' + settings.targetBarColor + ';"></span>';
52		// 	}
53		// }
54
55		// Render the progress bar
56		if ( settings.animation ) {
57			overlay += '<span class="bar" style="background-color:' + settings.barColor + ';"></span>';
58		}
59		else {
60			overlay += '<span class="bar" style="width:' + progress + '%;background-color:' + settings.barColor + ';"></span>';
61		}
62
63		// Render the percentage if enabled
64		if ( settings.percentage ) {
65			overlay += '<span class="progress-percent" style="line-height:' + settings.height + 'px;">' + progress + '%</span>';
66		}
67
68		// End
69		overlay += '</div></div>';
70
71		// Render the progress bar on the page
72		$( item ).replaceWith( overlay );
73
74	};
75
76	var animate = function() {
77
78		var doc_height = $(window).height();
79
80		$( '.sonny_progressbar.animate' ).each( function() {
81			var position = $( this ).offset().top;
82
83			if ( ( $(window).scrollTop() + doc_height - 60 ) > position ) {
84				var progress = $( this ).data( 'width' ) + "%";
85
86				$( this ).removeClass( 'animate' );
87				$( this ).find( '.bar' ).css('opacity', '0.1');
88
89				$( this ).find( '.bar' ).animate({
90					width : progress,
91					opacity : 1
92				}, 3000 );
93			}
94
95		});
96
97	};
98
99	// Looking for an animation element in the view
100	$(window).scroll(function() {
101
102		if ( $( '.sonny_progressbar.animate' ).length < 1 ) {
103			return;
104		}
105
106		// If there is an animate element visible on the page, trigger the animation
107		animate();
108
109	});
110
111
112})(jQuery);