<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<div class="paper-loader" role="status" aria-label="Loading">
  <span>
  </span>
  <span>
  </span>
  <span>
  </span>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.paper-loader{display:flex;gap:4px;width:max-content;height:58px;margin:auto;perspective:120px}.paper-loader span{display:block;width:20px;height:46px;border-radius:3px;background:linear-gradient(90deg,#4169cf,#79a2ff);box-shadow:3px 4px 7px #5870a42b;transform-origin:left center;animation:paper-fold 1.25s ease-in-out infinite}.paper-loader span:nth-child(2){background:linear-gradient(90deg,#ef8d77,#ffc2a7);animation-delay:.14s}.paper-loader span:nth-child(3){background:linear-gradient(90deg,#67b49f,#a6e0d0);animation-delay:.28s}@keyframes paper-fold{0%,100%{transform:rotateY(0);filter:brightness(1)}35%{transform:rotateY(-72deg);filter:brightness(.72)}60%{transform:rotateY(18deg);filter:brightness(1.08)}}