<div class="wrapper">
  <div class="triangle-wrap">
      <div class="triangle triangle--main"></div>
      <div class="triangle triangle--red"></div>
      <div class="triangle triangle--blue"></div>
    <div class="triangle__text">Loading</div>
  </div>
</div>
body{
  overflow: hidden;
}
.wrapper{
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #090909;
  animation-name: bodyLight;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  font-family: Roboto;
}
.triangle{
  margin: auto;
  border-style: solid;
  border-width: 0 125px 216.5px 125px;
  border-color: transparent transparent   #F2F2F0 transparent;
  animation-name: triangleMove;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition-timing-function: linear;
  &:after{
    position: absolute;
    top: 11.5px;
    left: -114px;
    display: block;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 115px 199.2px 115px;
    border-color: transparent transparent #090909 transparent;
  }
  &-wrap{
    margin: auto;
    position: relative;
    width: 250px;
    height: 217px;
  }
  &--main{
    position: relative;
    z-index: 10;
  }
  &--red{
    left: 0;
    top: 0;
    position: absolute !important;
    border-color: transparent transparent red transparent;
    animation-delay: .5s;
  }
  &--blue{
    left: 0;
    top: 0;
    position: absolute !important;
    border-color: transparent transparent blue transparent;
    animation-delay: .3s;
  }
  &__text{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 0;
    text-align: center;
    z-index: 9999;
    text-transform: uppercase;
    font-size: 30px;
    font-weight: 700;
    padding: 10px;
    background-color: #090909;
    letter-spacing: 20px;
    animation-name: textAnim;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    transition-timing-function: linear;
  }
}
@keyframes bodyLight{
  30%{
    filter: invert(14%);
  }
  40%{
    filter: invert(10%);
  }
  50%{
    filter: invert(7%);
  }
  60%{
    filter: invert(10%);
  }
  70%{
    filter: invert(12%);
  }
  80%{
    filter: invert(9%);
  }
  90%{
    filter: invert(14%);
  }
  100%{
    filter: invert(11%);
  }
}
@keyframes triangleMove{
  10%{
    transform: translateX(10px);
    filter: blur(3px);
  }
  20%{
    transform: translateX(4px);
    filter: blur(0);
  }
  30%{
    transform: translateX(-5px) skew(0deg);
    filter: blur(3px);
  }
  40%{
    transform: translateX(7px);
    filter: blur(0);
  }
  50%{
    transform: translateX(3px);
  }
  60%{
    transform: translateX(2px);
    filter: blur(5px);
  }
  70%{
    transform: translateX(-2px);
    filter: blur(0);
  }
  80%{
    transform: translateX(3px);
    filter: blur(2px);
  }
  90%{
    transform: translateX(-3px);
  }
  100%{
    transform: translateX(3px);
  }
}
@keyframes textAnim{
  10%{
    transform: scale(1.2) skew(180deg);
  }
  11%{
    transform: scale(1) skew(180deg);
  }
  
  70%{
    transform: scale(1) skew(-300deg);
    filter: blur(1px);
  }
  
  99%{
    transform: scale(1) skew(200deg);
  }
  
  100%{
    transform: scale(1) skew(-200deg);

  }
  
}
View Compiled

External CSS

  1. //fonts.googleapis.com/css?family=Roboto"

External JavaScript

This Pen doesn't use any external JavaScript resources.