RPM visualizer

Lets you enter a RPM number and displays a propeller spinning that fast.

by FloEdelmann

HTML

<div>
  
</div>
<input type="number" id="rpm" value="30" /> RPM

CSS

@keyframes wheel {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

div {
  background: red;
  width: 10px;
  height: 100px;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  background-clip: content-box;
  animation-iteration-count: infinite;
  animation-name: wheel;
  animation-timing-function: linear;
}

input {
  margin-top: 2em;
}

JavaScript

var $input = document.getElementById("rpm");
var $div = document.querySelector("div");

console.log($input, $div);

$input.addEventListener("change", onchange, false);

function onchange() {
  var rpm = $input.value;
  var duration = 60 / rpm;
  $div.style.animationDuration = duration + 's';
}

onchange();