body {
    margin: 0px;
}

.playerbox {
  position: absolute;
  width: 120px;
  height: 120px;
  float: left;
  background-color: #000000;
  border-radius: 50%;
}

#playbutton {
  width: 0;
  height: 60px;
  position: absolute;
  left: 36px;
  top: 30px;
  border: 0;
  background-color: transparent;
  border-color: transparent transparent transparent #ffffff;
  cursor: pointer;
  border-style: solid;
  border-width: 30px 0 30px 60px;
}

#playbutton.playing {
  left: 35px;
  width: 50px;
  height: 50px;
  top: 35px;
  border-width: 0;
  background-color: #ffffff;
  animation-name: pulse;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

#playbutton.loading {
  left: 35px;
  width: 50px;
  height: 50px;
  top: 35px;
  border-width: 0;
  background-color: #ffffff;
  animation-name: spin;
  animation-duration: 600ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}

@keyframes pulse {
    from { transform:scale(1); }
    50%  { transform:scale(1.1); }
    to   { transform:scale(1) }
}