A Pen by Aaron Wallis

Thumbnail
This awesome code was written by d2kagw, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright d2kagw ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Aaron Wallis</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="application">
  <div class="app-loader centered">
    <div class="app-loader-spinner">
      <svg class="lexer-anim lexer-anim-loader" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid meet">
          <g class="lexer-anim-group">
            <path class="lexer-anim-element lexer-anim-element-left" d="M290,0 a1,1 0 0,0 0,200 l 0 -35 a1,1 0 1,1 0,-130 l 0 -35"/>
            <path class="lexer-anim-element lexer-anim-element-right" d="M110,0 a1,1 0 1,1 0,200 l 0 -35 a1,1 0 0,0 0,-130 l 0 -35"/>
          </g>
        </svg>
    </div>
    <div class="app-loader-brand">
      <img src="https://sexy.lexer.io/images/logo_teal.svg" />
    </div>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/d2kagw/a-pen-by-aaron-wallis-EoVmmj */
@keyframes lx-spinner-l-mask {
  0% {
    transform: translate(0px, 0);
  }
  70% {
    transform: translate(0px, 0);
  }
  80% {
    transform: translate(20px, 0);
  }
  90% {
    transform: translate(20px, 0);
  }
  100% {
    transform: translate(0px, 0);
  }
}
@keyframes lx-spinner-l-group {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
  40% {
    opacity: 0.5;
  }
  70% {
    transform: rotate(1800deg) translate(0px, 0px);
    opacity: 1;
  }
  80% {
    transform: rotate(1800deg) translate(85px, 0px);
  }
  90% {
    transform: rotate(1800deg) translate(85px, 0px);
  }
  100% {
    transform: rotate(1800deg) translate(0px, 0px);
  }
}
@keyframes lx-spinner-r-mask {
  0% {
    transform: translate(0px, 0);
  }
  70% {
    transform: translate(0px, 0);
  }
  80% {
    transform: translate(-20px, 0);
  }
  90% {
    transform: translate(-20px, 0);
  }
  100% {
    transform: translate(0px, 0);
  }
}
@keyframes lx-spinner-r-group {
  0% {
    transform: rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
  40% {
    opacity: 0.5;
  }
  70% {
    transform: rotate(1800deg) translate(0px, 0px);
    opacity: 1;
  }
  80% {
    transform: rotate(1800deg) translate(-85px, 0px);
  }
  90% {
    transform: rotate(1800deg) translate(-85px, 0px);
  }
  100% {
    transform: rotate(1800deg) translate(0px, 0px);
    opacity: 1;
  }
}
@keyframes lx-loader-element {
  0% {
    transform: rotate(0deg);
  }
  90% {
    transform: rotate(2160deg);
  }
  100% {
    transform: rotate(2160deg);
  }
}
@keyframes lx-loader-group {
  0% {
    opacity: 1;
  }
  45% {
    opacity: 0.5;
  }
  90% {
    opacity: 1;
  }
}
@keyframes lx-anim-ie {
  42% {
    opacity: 0.5;
  }
  95% {
    transform: rotate(1440deg);
    opacity: 1;
  }
  100% {
    transform: rotate(1440deg);
  }
}
.lexer-anim {
  height: 100%;
  width: 100%;
}
.lexer-anim .lexer-anim-element {
  fill: #f00;
}

.lexer-anim.lexer-anim-loader.lexer-anim-responsive {
  height: 10%;
  width: 15%;
  min-width: 40px;
  min-height: 20px;
  max-width: 150px;
  max-height: 75px;
}
.lexer-anim.lexer-anim-loader .lexer-anim-group {
  animation: lx-loader-group 3s ease-in-out infinite;
}
.lexer-anim.lexer-anim-loader .lexer-anim-element-left {
  animation: lx-loader-element 3s ease-in-out infinite;
  transform-origin: 290px 100px;
}
.lexer-anim.lexer-anim-loader .lexer-anim-element-right {
  animation: lx-loader-element 3s ease-in-out infinite;
  transform-origin: 110px 100px;
}

.lexer-anim.lexer-anim-spinner.lexer-anim-responsive {
  height: 10%;
  width: 10%;
  min-width: 20px;
  min-height: 20px;
  max-width: 75px;
  max-height: 75px;
}
.lexer-anim.lexer-anim-spinner #lael-mask rect {
  animation: lx-spinner-l-mask 4s ease-in-out infinite;
}
.lexer-anim.lexer-anim-spinner #laer-mask rect {
  animation: lx-spinner-r-mask 4s ease-in-out infinite;
}
.lexer-anim.lexer-anim-spinner .lexer-anim-element-left {
  animation: lx-spinner-l-group 4s ease-in-out infinite;
  transform-origin: 100px 100px;
}
.lexer-anim.lexer-anim-spinner .lexer-anim-element-right {
  animation: lx-spinner-r-group 4s ease-in-out infinite;
  transform-origin: 100px 100px;
}

_:-ms-lang(x), .lexer-anim {
  animation: lx-anim-ie 3s ease-in-out infinite;
}

html, body {
  width: 100%;
  height: 100%;
  min-height: 600px;
  -webkit-overflow-scrolling: touch;
  background: #203333;
}

.application {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.app-loader {
  display: flex;
  height: 100%;
  width: 100%;
  flex-direction: column;
}

.app-loader-spinner {
  height: 50%;
  align-items: flex-end;
  display: flex;
  justify-content: center;
}
.app-loader-spinner .lexer-anim {
  margin-bottom: 40px;
  width: 200px;
  height: auto;
}
.app-loader-spinner .lexer-anim .lexer-anim-element {
  fill: #fff;
}

.app-loader-brand {
  height: 50%;
  align-items: flex-start;
  display: flex;
  justify-content: center;
}
.app-loader-brand img {
  width: 100px;
}

Comments