A simple yet awesome CSS3 throbber

by web5me

HTML

<span class="css-throbber"></span>

CSS

.css-throbber {
	color: #888;
	display: inline-block;
	-moz-transform-origin: 50% 52%;
}
.css-throbber-active {
	-animation: rotate 1.5s infinite linear;
	-moz-animation: rotate 1.5s infinite linear;
	-webkit-animation: rotate 1.5s infinite linear;
}
.css-throbber:after {
	content: '↻';
	font-family: 'Arial Unicode MS';
	font-size: 18px;
	-vertical-align: 0.075em;
}
.css-throbber.css-throbber-chrome:after {
	vertical-align: 0em;
}
@keyframes rotate {
	0% {transform: rotate(0deg)}
	100% {transform: rotate(360deg)}
}
@-moz-keyframes rotate {
	0% {-moz-transform: rotate(0deg)}
	100% {-moz-transform: rotate(360deg)}
}
@-webkit-keyframes rotate {
	0% {-webkit-transform: rotate(0deg)}
	100% {-webkit-transform: rotate(360deg)}
}

JavaScript

(function() {
	$.fn.throbber = function(action, msg) {
		this.show = function() {
			this.addClass('css-throbber');
			return this;
		};
		this.hide = function() {
			this.removeClass('css-throbber css-throbber-active');
			return this;
		};
		this.start = function() {
			this.addClass('css-throbber css-throbber-active');
			return this;
		};
		this.stop = function() {
			this.removeClass('css-throbber-active');
			return this;
		};
		//navigator.userAgent.indexOf('Chrome') != -1 && this.addClass('css-throbber-chrome');
		if (action) {
			this[action](msg);
		}
		return this;
	}
    
    $('.css-throbber').throbber().start();
})();