div#app-preloader {
  position: absolute;
  z-index: 100000000;
  background: rgba(255, 255, 255, 0.5);
  transition: opacity 1s;
}

div#app-incompatible-browser {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000001;
  width: 100vw;
  height: 100vh;
  background: #4bcddb;
  display: none;
}
div#app-incompatible-browser>div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 200px;
  margin-top: -100px;
  margin-left: -150px;
  text-align: center;
}

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

@-moz-keyframes spin2 {
  from { -moz-transform: rotate(-30deg); }
  to { -moz-transform: rotate(330deg); }
}
@-webkit-keyframes spin2 {
  from { -webkit-transform: rotate(-30deg); }
  to { -webkit-transform: rotate(330deg); }
}
@keyframes spin2 {
  from {transform:rotate(-30deg);}
  to {transform:rotate(330deg);}
}

@-moz-keyframes spin3 {
  from { -moz-transform: rotate(-60deg); }
  to { -moz-transform: rotate(300deg); }
}
@-webkit-keyframes spin3 {
  from { -webkit-transform: rotate(-60deg); }
  to { -webkit-transform: rotate(300deg); }
}
@keyframes spin3 {
  from {transform:rotate(-60deg);}
  to {transform:rotate(300deg);}
}

.spin {
  animation: spin 6000ms linear infinite;
  transform-origin: 256px 256px;
}
.spin2 {
  animation: spin2 6000ms linear infinite;
  transform-origin: 256px 256px;
}
.spin3 {
  animation: spin3 6000ms linear infinite;
  transform-origin: 256px 256px;
}