https://carriermall.co.kr/app/javascript/plugin/jquery.activity-indicator-1.0.0.min.js

1/*!
2 * NETEYE Activity Indicator jQuery Plugin
3 *
4 * Copyright (c) 2010 NETEYE GmbH
5 * Licensed under the MIT license
6 *
7 * Author: Felix Gnass [fgnass at neteye dot de]
8 * Version: @{VERSION}
9 */
10 
11/**
12 * Plugin that renders a customisable activity indicator (spinner) using SVG or VML.
13 */
14(function($) {
15
16	$.fn.activity = function(opts) {
17		this.each(function() {
18			var $this = $(this);
19			var el = $this.data('activity');
20			if (el) {
21				clearInterval(el.data('interval'));
22				el.remove();
23				$this.removeData('activity');
24			}
25			if (opts !== false) {
26				opts = $.extend({color: $this.css('color')}, $.fn.activity.defaults, opts);
27				
28				el = render($this, opts).css('position', 'absolute').prependTo(opts.outside ? 'body' : $this);
29				var h = $this.outerHeight() - el.height();
30				var w = $this.outerWidth() - el.width();
31				var margin = {
32					top: opts.valign == 'top' ? opts.padding : opts.valign == 'bottom' ? h - opts.padding : Math.floor(h / 2),
33					left: opts.align == 'left' ? opts.padding : opts.align == 'right' ? w - opts.padding : Math.floor(w / 2)
34				};
35				var offset = $this.offset();
36				if (opts.outside) {
37					el.css({top: offset.top + 'px', left: offset.left + 'px'});
38				}
39				else {
40					margin.top -= el.offset().top - offset.top;
41					margin.left -= el.offset().left - offset.left;
42				}
43				el.css({marginTop: margin.top + 'px', marginLeft: margin.left + 'px'});
44				animate(el, opts.segments, Math.round(10 / opts.speed) / 10);
45				$this.data('activity', el);
46			}
47		});
48		return this;
49	};
50	
51	$.fn.activity.defaults = {
52		segments: 12,
53		space: 3,
54		length: 7,
55		width: 4,
56		speed: 1.2,
57		align: 'center',
58		valign: 'center',
59		padding: 4
60	};
61	
62	$.fn.activity.getOpacity = function(opts, i) {
63		var steps = opts.steps || opts.segments-1;
64		var end = opts.opacity !== undefined ? opts.opacity : 1/steps;
65		return 1 - Math.min(i, steps) * (1 - end) / steps;
66	};
67	
68	/**
69	 * Default rendering strategy. If neither SVG nor VML is available, a div with class-name 'busy' 
70	 * is inserted, that can be styled with CSS to display an animated gif as fallback.
71	 */
72	var render = function() {
73		return $('<div>').addClass('busy');
74	};
75	
76	/**
77	 * The default animation strategy does nothing as we expect an animated gif as fallback.
78	 */
79	var animate = function() {
80	};
81	
82	/**
83	 * Utility function to create elements in the SVG namespace.
84	 */
85	function svg(tag, attr) {
86		var el = document.createElementNS("http://www.w3.org/2000/svg", tag || 'svg');
87		if (attr) {
88			$.each(attr, function(k, v) {
89				el.setAttributeNS(null, k, v);
90			});
91		}
92		return $(el);
93	}
94	
95	if (document.createElementNS && document.createElementNS( "http://www.w3.org/2000/svg", "svg").createSVGRect) {
96	
97		// =======================================================================================
98		// SVG Rendering
99		// =======================================================================================
100		
101		/**
102		 * Rendering strategy that creates a SVG tree.
103		 */
104		render = function(target, d) {
105			var innerRadius = d.width*2 + d.space;
106			var r = (innerRadius + d.length + Math.ceil(d.width / 2) + 1);
107			
108			var el = svg().width(r*2).height(r*2);
109			
110			var g = svg('g', {
111				'stroke-width': d.width, 
112				'stroke-linecap': 'round', 
113				stroke: d.color
114			}).appendTo(svg('g', {transform: 'translate('+ r +','+ r +')'}).appendTo(el));
115			
116			for (var i = 0; i < d.segments; i++) {
117				g.append(svg('line', {
118					x1: 0, 
119					y1: innerRadius, 
120					x2: 0, 
121					y2: innerRadius + d.length, 
122					transform: 'rotate(' + (360 / d.segments * i) + ', 0, 0)',
123					opacity: $.fn.activity.getOpacity(d, i)
124				}));
125			}
126			return $('<div>').append(el).width(2*r).height(2*r);
127		};
128
129		/**
130		 * Animation strategy that transforms a SVG element using setInterval().
131		 */
132		animate = function (el, steps, duration) {
133			var rotation = 0;
134			var g = el.find('g g').get(0);
135			el.data('interval', setInterval(function () {
136				g.setAttributeNS(null, 'transform', 'rotate(' + (++rotation % steps * (360 / steps)) + ')');
137			}, duration * 1000 / steps));
138		};
139
140	}
141	else {
142		
143		// =======================================================================================
144		// VML Rendering
145		// =======================================================================================
146		
147		var s = $('<shape>').css('behavior', 'url(#default#VML)');
148
149		$('body').append(s);
150
151		if (s.get(0).adj) {
152		
153			// VML support detected. Insert CSS rules for group, shape and stroke.
154			var sheet = document.createStyleSheet();
155			$.each(['group', 'shape', 'stroke'], function() {
156				sheet.addRule(this, "behavior:url(#default#VML);");
157			});
158			
159			/**
160			 * Rendering strategy that creates a VML tree. 
161			 */
162			render = function(target, d) {
163			
164				var innerRadius = d.width*2 + d.space;

165				var r = (innerRadius + d.length + Math.ceil(d.width / 2) + 1);
166				var s = r*2;
167				var o = -Math.ceil(s/2);
168				
169				var el = $('<group>', {coordsize: s + ' ' + s, coordorigin: o + ' ' + o}).css({top: o, left: o, width: s, height: s});
170				for (var i = 0; i < d.segments; i++) {
171					el.append($('<shape>', {path: 'm ' + innerRadius + ',0  l ' + (innerRadius + d.length) + ',0'}).css({
172						width: s,
173						height: s,
174						rotation: (360 / d.segments * i) + 'deg'
175					}).append($('<stroke>', {color: d.color, weight: d.width + 'px', endcap: 'round', opacity: $.fn.activity.getOpacity(d, i)})));
176				}
177				return $('<group>', {coordsize: s + ' ' + s}).css({width: s, height: s, overflow: 'hidden'}).append(el);
178			};
179		
180			/**
181		     * Animation strategy that modifies the VML rotation property using setInterval().
182		     */
183			animate = function(el, steps, duration) {
184				var rotation = 0;
185				var g = el.get(0);
186				el.data('interval', setInterval(function() {
187					g.style.rotation = ++rotation % steps * (360 / steps);
188				},  duration * 1000 / steps));
189			};
190		}
191		$(s).remove();
192	}
193
194})(jQuery);