Speed Circle

---

Html

JavaScript

/* Options */
var options = {
  // Text value and color
  text: {
    value: 'TEST',
    color: '#007bfb'
  },
  // Circle color and rotation speed. Circle 1 to 4 starts from outside towards center.
  circle1: {
    speed: 1,
    color: '#007bfb'
  },
  circle2: {
    speed: -1,
    color: '#007bfb'
  },
  circle3: {
    speed: 1,
    color: '#007bfb'
  },
  circle4: {
    speed: -1,
    color: '#007bfb'
  }
}
/* Constructor */
var speedCircle = new zeu.SpeedCircle('speed-circle', options);

/* Setter */
speedCircle.speed1 = 2;
speedCircle.color1 = '#007bfb';
speedCircle.speed2 = -2;
speedCircle.color2 = '#28a748';
speedCircle.speed3 = 2;
speedCircle.color3 = '#17a2b9';
speedCircle.speed4 = -2;
speedCircle.color4 = '#6c757e';
speedCircle.textValue = 'ZEU';
speedCircle.textColor = '#343a42';

More examples

Change speed and color on the fly.