Wyre Payment Like loader demo

Beautiful Smooth and Sexy loader like Wyre Payment using pure CSS and HTML. Demo and Download the zip (*.zip).

Wyre loading like code below

HTML Snippet

<div class="wyre-cards">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>

CSS Snippet

.card {
  background-color: #0c55fb;
  height: 50px;
  width: 40px;
  margin-bottom: 2px;
  position: absolute;
  z-index: 3;
  box-shadow: 0 5px 14px 0 rgba(1, 1, 1, 0.2);
  border-radius: 12px 0 12px 0;
  -webkit-transform: skewX(-12deg);
          transform: skewX(-12deg);
  -webkit-animation: float 3s infinite ease-in-out;
          animation: float 3s infinite ease-in-out;
}
.card:nth-child(2) {
  left: 20px;
  top: 15px;
  z-index: 2;
  background-color: #0092ff;
  -webkit-animation: float 3s infinite ease-in-out;
          animation: float 3s infinite ease-in-out;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.card:nth-child(3) {
  left: 40px;
  top: 30px;
  z-index: 1;
  background-color: #94c5ff;
  -webkit-animation: float 3s infinite ease-in-out;
          animation: float 3s infinite ease-in-out;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.wyre-cards {
  position: fixed;
  width: 120px;
  height: 120px;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
}
@-webkit-keyframes float {
  0% {
    -webkit-transform: skew(-12deg) translateY(0);
            transform: skew(-12deg) translateY(0);
  }
  50% {
    -webkit-transform: skew(-12deg) translateY(20px);
            transform: skew(-12deg) translateY(20px);
  }
  100% {
    -webkit-transform: skew(-12deg) translateY(0);
            transform: skew(-12deg) translateY(0);
  }
}
@keyframes float {
  0% {
    -webkit-transform: skew(-12deg) translateY(0);
            transform: skew(-12deg) translateY(0);
  }
  50% {
    -webkit-transform: skew(-12deg) translateY(20px);
            transform: skew(-12deg) translateY(20px);
  }
  100% {
    -webkit-transform: skew(-12deg) translateY(0);
            transform: skew(-12deg) translateY(0);
  }
}

Find the demo below

See the Pen Wyre Loading by Spenser (@spenser) on CodePen.

Download

Advertisement

Google Matched Content...