Simple triangle spinner

index.html

<div class="eemwait-sq">
  <span class="eemwait-sq1"></span>
  <span class="eemwait-sq2"></span>
  <span class="eemwait-sq3"></span>
  <span class="eemwait-sq4"></span>
</div>

Simple triangle spinner.markdown

Simple triangle spinner

A pure CS3 triangle-based spinner with css animations.

A Pen by Ignacio Díaz-Roncero Fraile on CodePen.

License.

style.css

@keyframes sq-1 {
  /* line 94, ../sass/modules/_eemwait.scss */
  0% {
    top: 0;
  }

  /* line 97, ../sass/modules/_eemwait.scss */
  13% {
    top: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 101, ../sass/modules/_eemwait.scss */
  25% {
    top: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 105, ../sass/modules/_eemwait.scss */
  75% {
    top: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 109, ../sass/modules/_eemwait.scss */
  88% {
    top: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 113, ../sass/modules/_eemwait.scss */
  100% {
    top: 0;
  }
}

@keyframes sq-2 {
  /* line 119, ../sass/modules/_eemwait.scss */
  0% {
    right: 0;
  }

  /* line 122, ../sass/modules/_eemwait.scss */
  13% {
    right: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 126, ../sass/modules/_eemwait.scss */
  25% {
    right: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 130, ../sass/modules/_eemwait.scss */
  75% {
    right: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 134, ../sass/modules/_eemwait.scss */
  88% {
    right: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 138, ../sass/modules/_eemwait.scss */
  100% {
    right: 0;
  }
}

@keyframes sq-3 {
  /* line 144, ../sass/modules/_eemwait.scss */
  0% {
    bottom: 0;
  }

  /* line 147, ../sass/modules/_eemwait.scss */
  13% {
    bottom: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 151, ../sass/modules/_eemwait.scss */
  25% {
    bottom: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 155, ../sass/modules/_eemwait.scss */
  75% {
    bottom: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 159, ../sass/modules/_eemwait.scss */
  88% {
    bottom: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 163, ../sass/modules/_eemwait.scss */
  100% {
    bottom: 0;
  }
}

@keyframes sq-4 {
  /* line 169, ../sass/modules/_eemwait.scss */
  0% {
    left: 0;
  }

  /* line 172, ../sass/modules/_eemwait.scss */
  13% {
    left: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 176, ../sass/modules/_eemwait.scss */
  25% {
    left: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 180, ../sass/modules/_eemwait.scss */
  75% {
    left: -15%;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /* line 184, ../sass/modules/_eemwait.scss */
  88% {
    left: -15%;
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
  }

  /* line 188, ../sass/modules/_eemwait.scss */
  100% {
    left: 0;
  }
}

@keyframes sq-spin {
  /* line 194, ../sass/modules/_eemwait.scss */
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 197, ../sass/modules/_eemwait.scss */
  25% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 200, ../sass/modules/_eemwait.scss */
  50% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }

  /* line 203, ../sass/modules/_eemwait.scss */
  75% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  /* line 206, ../sass/modules/_eemwait.scss */
  100% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

/* line 213, ../sass/modules/_eemwait.scss */
.eemwait-sq {
  width: 20px;
  height: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform: translate(-50% -50%);
  -moz-transform: translate(-50% -50%);
  -ms-transform: translate(-50% -50%);
  -o-transform: translate(-50% -50%);
  transform: translate(-50% -50%);
  animation: sq-spin 4s ease-in-out 0s infinite normal;
}

/* line 224, ../sass/modules/_eemwait.scss */
.eemwait-sq1 {
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: #252525 transparent transparent transparent;
  top: 0;
  animation: sq-1 4s linear 0s infinite normal;
  animation-fill-mode: forwards;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  transform-origin: 50% 0;
}

/* line 237, ../sass/modules/_eemwait.scss */
.eemwait-sq2 {
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent #252525 transparent transparent;
  right: 0;
  animation: sq-2 4s linear 0s infinite normal;
  animation-fill-mode: forwards;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  transform-origin: 100% 50%;
}

/* line 250, ../sass/modules/_eemwait.scss */
.eemwait-sq3 {
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent #252525 transparent;
  bottom: 0;
  animation: sq-3 4s linear 0s infinite normal;
  animation-fill-mode: forwards;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  transform-origin: 50% 100%;
}

/* line 263, ../sass/modules/_eemwait.scss */
.eemwait-sq4 {
  position: absolute;
  width: 0px;
  height: 0px;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent transparent #252525;
  left: 0;
  animation: sq-4 4s linear 0s infinite normal;
  animation-fill-mode: forwards;
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
  transform: rotate(0);
  transform-origin: 0 50%;
}