Hand-picked HTML and CSS code examples, tutorials and articles
CSS Gallery, jQuery plugins

Wyre Payment Like loader demo

Smooth Wyre Payment Like loader using pure CSS

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