Fidget spinner in CSS

fidget-spinner-in-css.markdown

Fidget spinner in CSS

A Pen by Herbowicz on CodePen.

License.

index.html

<div id='app'>
  <div class='push-button' data-js-spin></div>
</div>

script.js

var $spin = document.querySelector('[data-js-spin]')

$spin.addEventListener('touchmove', () => {
  spin($spin, { theta: 0, av: 30 })
})

function spin (el, { theta, av }) {
  theta += av
  el.style.transform = `rotate(${theta}deg)`
  av *= 0.99
  if (av < 0.001) return
  
  requestAnimationFrame(() => {
    spin(el, { theta, av })
  })
}

style.css

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: black;
}


.push-button {
  width: 400px;
  height: 400px;
  background-image: url('http://goa.cool/s/l.png');
  cursor: pointer;
  user-select: none;  
}