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