<!--
  Author: @codepeek
  License: MIT
  Tags: #microinteraction
-->
<div class="juggle-loader">
  <div class="shadow shadow-l">
  </div>
  <div class="shadow shadow-r">
  </div>
  <div class="hand hand-l">
  </div>
  <div class="hand hand-r">
  </div>
  <div class="ball ball-1">
  </div>
  <div class="ball ball-2">
  </div>
  <div class="ball ball-3">
  </div>
</div>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #microinteraction
 */

.juggle-loader {
  position: relative;
  width: 140px;
  height: 100px;
}
.hand {
  position: absolute;
  bottom: 14px;
  width: 20px;
  height: 8px;
  border-radius: 4px;
  background: #3a2e26;
}
.hand-l { left: 14px; animation: catch-bounce 1.2s ease-in-out infinite; }
.hand-r { right: 14px; animation: catch-bounce 1.2s ease-in-out infinite 0.6s; }
@keyframes catch-bounce {
  0%, 92%, 100% { transform: scaleX(1) translateY(0); }
  96% { transform: scaleX(1.3) translateY(1px); }
}
.shadow {
  position: absolute;
  bottom: 8px;
  width: 16px;
  height: 4px;
  border-radius: 50%;
  background: rgba(0,0,0,0.15);
}
.shadow-l { left: 16px; animation: shadow-pulse 1.2s ease-in-out infinite; }
.shadow-r { right: 16px; animation: shadow-pulse 1.2s ease-in-out infinite 0.6s; }
@keyframes shadow-pulse {
  0%, 92%, 100% { transform: scale(1); opacity: 0.5; }
  96% { transform: scale(1.5); opacity: 0.25; }
}
.ball {
  position: absolute;
  bottom: 20px;
  left: 24px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.25), inset 2px 2px 3px rgba(255,255,255,0.3);
}
.ball-1 { background: #e8734a; animation: arc-a 1.2s ease-in-out infinite; }
.ball-2 { background: #4a9e8f; animation: arc-b 1.2s ease-in-out infinite; }
.ball-3 { background: #e8b34a; animation: arc-a 1.2s ease-in-out infinite 0.6s; }
@keyframes arc-a {
  0% { left: 24px; bottom: 20px; transform: scale(1, 1); }
  8% { transform: scale(1.2, 0.8); }
  45% { left: 68px; bottom: 78px; transform: scale(1, 1); }
  92% { left: 108px; bottom: 20px; transform: scale(1, 1); }
  96% { transform: scale(1.25, 0.75); }
  100% { left: 108px; bottom: 20px; transform: scale(1, 1); }
}
@keyframes arc-b {
  0% { left: 108px; bottom: 20px; transform: scale(1, 1); }
  8% { transform: scale(1.2, 0.8); }
  45% { left: 64px; bottom: 78px; transform: scale(1, 1); }
  92% { left: 24px; bottom: 20px; transform: scale(1, 1); }
  96% { transform: scale(1.25, 0.75); }
  100% { left: 24px; bottom: 20px; transform: scale(1, 1); }
}