Triangle Loading Animation

Triangle Loading Animtaion developed using HTML and CSS. CSS3 properties transform, keyframes and animation are used to develop the triangle loading demo.

Demo Download

AuthorTony Banik
Official Page:Go to website
CreatedSEPTEMBER 13, 2018
LicenseOpen
Compatible browsersChrome, Firefox, Opera, Safari

HTML Snippet

<div class="container">
  <div class="triangle"></div>
  <div class="triangle"></div>
</div>
<div class="container">
  <div class="triangle shadow"></div>
  <div class="triangle shadow"></div>
</div>

CSS Code

body {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #c5f9e2;
}

a {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 10px;
  color: rgba(0, 0, 0, 0.3);
  z-index: 12;
}

.container {
  position: absolute;
  animation: rotate 3s linear infinite;
}
.container:last-of-type {
  z-index: -1;
  margin: 1%;
}

.triangle {
  position: relative;
  text-align: left;
  transform-origin: 33.33% 66.66%;
}
.triangle:before, .triangle:after {
  content: '';
  position: absolute;
  background: inherit;
}
.triangle, .triangle:before, .triangle:after {
  width: 2.3em;
  height: 2.3em;
  border-top-right-radius: 20%;
}
.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, 0.707) translate(0, -50%);
}
.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(0.707, 1.414) translate(50%);
}
.triangle:first-of-type {
  background: #ff1668;
  transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866) translate(143.33%, 110%);
  animation: first 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.triangle:last-of-type {
  background: #1626f5;
  transform: rotate(0deg) skewX(-30deg) scale(1, 0.866) translate(-100%, -4%);
  animation: last 3s cubic-bezier(0.645, 0.045, 0.355, 1) infinite;
}
.triangle.shadow, .triangle.shadow:before, .triangle.shadow:after {
  background: #a0f5d0;
  backface-visibility: hidden;
  perspective: 1000;
  filter: blur(0.5em);
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@keyframes first {
  0% {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866) translate(143.33%, 110%);
  }
  33% {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866) translate(-76.67%, -120%);
  }
  66% {
    transform: rotate(-60deg) skewX(-30deg) scale(1, 0.866) translate(-76.67%, 112%);
  }
}
@keyframes last {
  0% {
    transform: rotate(0deg) skewX(-30deg) scale(1, 0.866) translate(-100%, -4%);
  }
  33% {
    transform: rotate(0deg) skewX(-30deg) scale(1, 0.866) translate(134%, -4%);
  }
  66% {
    transform: rotate(0deg) skewX(-30deg) scale(1, 0.866) translate(-89%, -214%);
  }
}

Preview

See the Pen Triangle Loading Animtaion by Tony Banik (@tonybanik) on CodePen.

W3TWEAKS
Latest posts by W3TWEAKS (see all)

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *