/*
  Sprite: loading-sprite.png — 360×2310px (7 frames × 360×330px)
  Usage: <div class="loader"></div>
  Sizes: loader-xs (14px), loader-sm (20px), loader-md (32px), loader-lg (80px)
*/
.loader {
    --lw: 80px;
    --lh: 73px;
    display: inline-block;
    width: var(--lw);
    height: var(--lh);
    background-image: url('../images/loading-sprite.png');
    background-size: var(--lw) calc(var(--lh) * 7);
    background-repeat: no-repeat;
    background-position: 0 0;
    animation: loader-spin 700ms steps(7) infinite;
}

@keyframes loader-spin {
    from { background-position-y: 0; }
    to   { background-position-y: calc(var(--lh) * -7); }
}

.loader-xs { --lw: 14px; --lh: 13px; }
.loader-sm { --lw: 20px; --lh: 18px; }
.loader-md { --lw: 32px; --lh: 29px; }
.loader-lg { --lw: 80px; --lh: 73px; }