spin
Version:
spin.js spinner component
58 lines (53 loc) • 1.17 kB
HTML
<html>
<head>
<title>spin.js</title>
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}
.preview {
background: #aaa;
color: black;
width: 220px;
height: 220px;
margin: 0 20px;
float: left;
border-radius: 10px;
}
#preview2 {
background: #666;
color: red;
}
</style>
</head>
<body>
<div id="preview1" class="preview"></div>
<div id="preview2" class="preview"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="../spin.js"></script>
<script>
$.fn.spin = function(opts) {
this.each(function() {
var $this = $(this),
data = $this.data();
if (data.spinner) {
data.spinner.stop();
delete data.spinner;
}
if (opts !== false) {
data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
}
});
return this;
};
$('#preview1').spin();
$('#preview2').spin({color: '#fff'});
//Remove spinner upon click
$('.preview').click(function() {
$(this).spin(false);
});
</script>
</body>
</html>