css spinner MapX

vertical css spinner with brightness filter

by fxi

HTML

<span class="spinner"></span>

CSS

html, body {
  width: 100%;
  height: 100%;
}

@-moz-keyframes spin {
  100% {
    -moz-filter: brightness(1);
  }

  50% {
    -moz-transform: rotateY(90deg);
    -moz-filter: brightness(0.2);
  }

  0% {
    -moz-filter: brightness(1);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-filter: brightness(1);
  }

  50% {
    -webkit-transform: rotateY(90deg);
    -webkit-filter: brightness(0.2);
  }

  0% {
    -webkit-filter: brightness(1);
  }
}

@keyframes spin {
  100% {
    filter: brightness(1);
  }

  50% {
    transform: rotateY(90deg);
    filter: brightness(0.2);
  }

  0% {
    filter: brightness(1);
  }
}

.spinner {
  width: 36px;
  height: 50px;
  position: absolute;
  top: 50px;
  left: 50px;
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  background-image: url('https://cdn.jsdelivr.net/gh/fxi/map-x-mgl@master/app/src/png/map-x-logo.png');
  background-position: center;
  background-size: cover;
}