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

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

.pebble-loader{display:flex;align-items:flex-end;gap:10px;width:max-content;height:64px;margin:auto}.pebble-loader i{position:relative;display:block;width:18px;height:18px;border-radius:48% 52% 54% 46%;background:#5d7ee8;box-shadow:inset 3px 3px 4px #9cb5ff,0 6px 8px #31458235;animation:pebble-hop .8s ease-in-out infinite}.pebble-loader i::after{content:"";position:absolute;top:32px;left:1px;width:16px;height:4px;border-radius:50%;background:#26354c22;animation:pebble-shadow .8s ease-in-out infinite}.pebble-loader i:nth-child(2){animation-delay:.12s;background:#6cc8b6}.pebble-loader i:nth-child(3){animation-delay:.24s;background:#f2ae71}.pebble-loader i:nth-child(4){animation-delay:.36s;background:#d785b6}@keyframes pebble-hop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-22px) rotate(18deg)}}@keyframes pebble-shadow{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(.45);opacity:.16}}