@import "compass/css3";
body {
margin: 0;
padding: 0;
overflow: hidden;
background: rgb(40,40,40);
}
View Compiled
var c = new Sketch.create({autoclear: false}),
bigCircle = 50,
littleCircle = 5,
// The velocity value determines how much to move the spinner head (in radians).
velocity = 0.08,
hue = 0,
// The alpha value below determines the length of the spinner's tail.
bg = 'rgba(40,40,40,.075)';
Spinner = function() {};
Spinner.prototype.setup = function() {
this.x = c.width / 2;
this.y = c.height / 2 - bigCircle;
this.rotation = 0;
}
Spinner.prototype.update = function() {
this.rotation += velocity;
this.rotation = this.rotation % TWO_PI;
this.x = c.width /2 + cos(this.rotation) * bigCircle;
this.y = c.height / 2 + sin(this.rotation) * bigCircle;
}
Spinner.prototype.draw = function() {
c.fillStyle = 'hsl('+hue+',50%,50%)';
c.beginPath();
c.arc(this.x, this.y, littleCircle, 0, TWO_PI);
c.fill();
c.closePath();
}
c.setup = function() {
spinner = new Spinner();
spinner.setup();
}
c.update = function() {
spinner.update();
hue = ++hue % 360;
}
c.draw = function() {
spinner.draw();
c.fillStyle = bg;
c.fillRect(0,0,c.width,c.height);
}
This Pen doesn't use any external CSS resources.