Gift Box Loader

<div class="ldr-gift-box" role="status" aria-label="Loading">
  <span class="ldr-gift-box-sparks"></span>
  <span class="ldr-gift-box-box"></span>
  <span class="ldr-gift-box-lid"></span>
</div>

.ldr-gift-box {
  --s: var(--ldr-size, 48px);
  --c: var(--ldr-color, #3b82f6);
  position: relative;
  width: var(--s);
  height: var(--s);
}
.ldr-gift-box-box {
  position: absolute;
  left: 18%;
  bottom: 6%;
  width: 64%;
  height: 44%;
  border-radius: 0 0 calc(var(--s) / 24) calc(var(--s) / 24);
  background: linear-gradient(var(--c) 0 0) 50% 0 / 20% 100% no-repeat, color-mix(in srgb, var(--ldr-color, #3b82f6) 35%, transparent);
  transform-origin: 50% 100%;
  animation: ldr-gift-box-squash 2s infinite;
}
.ldr-gift-box-lid {
  position: absolute;
  left: 12%;
  bottom: 50%;
  width: 76%;
  height: 15%;
  border-radius: calc(var(--s) / 30);
  background: linear-gradient(var(--c) 0 0) 50% 0 / 17% 100% no-repeat, color-mix(in srgb, var(--ldr-color, #3b82f6) 55%, transparent);
  animation: ldr-gift-box-lid 2s infinite;
}
.ldr-gift-box-lid::before,
.ldr-gift-box-lid::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 88%;
  width: calc(var(--s) * 0.2);
  height: calc(var(--s) * 0.15);
  margin-left: calc(var(--s) * -0.2);
  box-sizing: border-box;
  border: calc(var(--s) / 16) solid var(--c);
  border-radius: 50%;
  transform: rotate(-22deg);
  transform-origin: 100% 100%;
}
.ldr-gift-box-lid::after {
  margin-left: 0;
  transform: rotate(22deg);
  transform-origin: 0 100%;
}
.ldr-gift-box-sparks {
  position: absolute;
  left: 50%;
  bottom: 52%;
  width: calc(var(--s) / 12);
  height: calc(var(--s) / 12);
  margin-left: calc(var(--s) / -24);
  border-radius: 50%;
  background: var(--c);
  box-shadow:
    calc(var(--s) * -0.22) calc(var(--s) * 0.04) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent),
    calc(var(--s) * 0.22) calc(var(--s) * 0.02) 0 color-mix(in srgb, var(--ldr-color, #3b82f6) 70%, transparent);
  opacity: 0;
  animation: ldr-gift-box-sparks 2s infinite;
}
@keyframes ldr-gift-box-squash {
  0%, 28%   { transform: scale(1); }
  36%       { transform: scale(1.04, 0.92); }
  42%       { transform: scale(0.98, 1.03); }
  50%       { transform: scale(1.03, 0.95); }
  58%, 100% { transform: scale(1); }
}
@keyframes ldr-gift-box-lid {
  0%, 28%   { transform: translateY(0) rotate(0); }
  36%       { transform: translateY(calc(var(--s) * 0.035)) rotate(0); animation-timing-function: cubic-bezier(0.2, 0.7, 0.3, 1); }
  44%       { transform: translateY(calc(var(--s) * -0.2)) rotate(-9deg); animation-timing-function: cubic-bezier(0.6, 0, 0.8, 0.4); }
  50%       { transform: translateY(calc(var(--s) * 0.022)) rotate(0); }
  55%       { transform: translateY(calc(var(--s) * -0.06)) rotate(4deg); }
  60%       { transform: translateY(0) rotate(0); }
  64%       { transform: translateY(calc(var(--s) * -0.015)) rotate(-1deg); }
  68%, 100% { transform: translateY(0) rotate(0); }
}
@keyframes ldr-gift-box-sparks {
  0%, 38%   { opacity: 0; transform: translateY(0) scale(0.3); }
  45%       { opacity: 1; transform: translateY(calc(var(--s) * -0.14)) scale(1); }
  58%, 100% { opacity: 0; transform: translateY(calc(var(--s) * -0.26)) scale(0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .ldr-gift-box, .ldr-gift-box *, .ldr-gift-box::before, .ldr-gift-box::after, .ldr-gift-box *::before, .ldr-gift-box *::after {
    animation-duration: 3s;
  }
}

Similar loaders