ajax.nette.js - SVG spinner

svg-spinner.ajax.coffee

$.nette.ext 'svg-spinner', 
	start: (c, s) ->
		if s.nette.el
			for i in s.nette.el
				$(i).closest('*[id^=snippet--]').addClass 'svgSpinner'
				# source: http://codepen.io/aurer/pen/jEGbA?editors=110
				$(i).closest('*[id^=snippet--]').append '<div class="snippet-wrapper"><div class="loader"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"> <rect x="0" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML"values="5;21;5"begin="0s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML"values="13; 5; 13"begin="0s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="10" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML"values="5;21;5"begin="0.15s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML"values="13; 5; 13"begin="0.15s" dur="0.6s" repeatCount="indefinite" /> </rect> <rect x="20" y="13" width="4" height="5" fill="#333"> <animate attributeName="height" attributeType="XML"values="5;21;5"begin="0.3s" dur="0.6s" repeatCount="indefinite" /> <animate attributeName="y" attributeType="XML"values="13; 5; 13"begin="0.3s" dur="0.6s" repeatCount="indefinite" /> </rect> </svg> </div></div>'
	success: (payload) ->
		if payload.snippets
			for el, html of payload.snippets
				$("##{el}").removeClass 'svgSpinner'

svg-spinner.ajax.less

.svgSpinner {
	* { .opacity(0.8); }
	.snippet-wrapper { .top-left(0,0); .size(100%,100%); .opacity(1); 
		.loader { .top-left(50%,50%); }
		* { .opacity(1); }
	}
}

Requirements:

• nette.ajax.js - http://addons.nette.org/vojtech-dobes/nette-ajax-js
• LessHat - https://github.com/madebysource/lesshat