# Slinky on the stairs loader

> A rainbow spring walks down step by step: its coils leap over in an arc one after another and stack on the step below.

- Category: [Loaders](https://library.aimran.es/components/loaders)
- Built with: HTML + CSS
- Live editor: https://library.aimran.es/blocks/uv-ld-slinky-stairs
- Library: AIMRAN Library (https://library.aimran.es), free, no sign-up, by Aimran Oukham

## Where to use it

Twelve coils with colors blended between the two block colors travel from one step to the next along arcs computed at build time, flipping as they go, so the spring stretches into an arch and gathers again below. The stairs pan with the motion and repeat, so the walk never ends. It suits toy brands, kids content and step by step processes.

The main color sets the top coils and the second the bottom ones, so the spring can be rainbow, metal grey or your brand tones. Use it for tasks that advance in stages, and keep a little side margin because the edges fade out.

## Code

### HTML

```html
<div class="uvq10-sly" role="status"><span class="sr">Loading</span><div class="ly" aria-hidden="true"><i class="sp" style="--j:-2"></i><i class="sp" style="--j:-1"></i><i class="sp" style="--j:0"></i><i class="sp" style="--j:1"></i><i class="sp" style="--j:2"></i><i class="sp" style="--j:3"></i><i class="sp" style="--j:4"></i><i class="sp" style="--j:5"></i><i class="r r0"></i><i class="r r1"></i><i class="r r2"></i><i class="r r3"></i><i class="r r4"></i><i class="r r5"></i><i class="r r6"></i><i class="r r7"></i><i class="r r8"></i><i class="r r9"></i><i class="r r10"></i><i class="r r11"></i></div></div>
```

### CSS

```css
.uvq10-sly {
  --c1: #f72585;
  --c2: #4cc9f0;
  --s: 16px;
  /* tamaño */
  --k: 1;
  /* velocidad */
  --fg: #1d1d1f;
  /* texto */
  --bg: #f5f5f7;
  /* fondo */
}

.uvq10-sly {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 10em;
  height: 7em;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
  mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
}

.uvq10-sly .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.uvq10-sly .ly {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(2.6em,.6em);
  animation: uvq10-sly calc(3.2s / var(--k)) linear infinite;
}

.uvq10-sly .sp {
  position: absolute;
  left: calc(var(--j) * 3.2em);
  top: calc(3em + var(--j) * 1.5em);
  width: 3.2em;
  height: 12em;
  background: linear-gradient(color-mix(in srgb,var(--fg) 16%,var(--bg)) 0 .18em,color-mix(in srgb,var(--fg) 8%,var(--bg)) .18em);
  box-shadow: inset .12em 0 0 color-mix(in srgb,var(--fg) 14%,var(--bg));
}

.uvq10-sly .r {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 2.4em;
  height: .55em;
  border: .15em solid;
  border-radius: 50%;
  box-shadow: 0 .04em 0 rgba(0,0,0,.18);
}

.uvq10-sly .r0 {
  border-color: color-mix(in oklab,var(--c1) 0%,var(--c2));
  transform: translate(0.4em,2.45em);
  animation: uvq10-sly-0 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r1 {
  border-color: color-mix(in oklab,var(--c1) 9%,var(--c2));
  transform: translate(0.4em,2.32em);
  animation: uvq10-sly-1 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r2 {
  border-color: color-mix(in oklab,var(--c1) 18%,var(--c2));
  transform: translate(0.4em,2.19em);
  animation: uvq10-sly-2 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r3 {
  border-color: color-mix(in oklab,var(--c1) 27%,var(--c2));
  transform: translate(0.4em,2.06em);
  animation: uvq10-sly-3 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r4 {
  border-color: color-mix(in oklab,var(--c1) 36%,var(--c2));
  transform: translate(0.4em,1.93em);
  animation: uvq10-sly-4 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r5 {
  border-color: color-mix(in oklab,var(--c1) 45%,var(--c2));
  transform: translate(0.4em,1.80em);
  animation: uvq10-sly-5 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r6 {
  border-color: color-mix(in oklab,var(--c1) 55%,var(--c2));
  transform: translate(0.4em,1.67em);
  animation: uvq10-sly-6 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r7 {
  border-color: color-mix(in oklab,var(--c1) 64%,var(--c2));
  transform: translate(0.4em,1.54em);
  animation: uvq10-sly-7 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r8 {
  border-color: color-mix(in oklab,var(--c1) 73%,var(--c2));
  transform: translate(0.4em,1.41em);
  animation: uvq10-sly-8 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r9 {
  border-color: color-mix(in oklab,var(--c1) 82%,var(--c2));
  transform: translate(0.4em,1.28em);
  animation: uvq10-sly-9 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r10 {
  border-color: color-mix(in oklab,var(--c1) 91%,var(--c2));
  transform: translate(0.4em,1.15em);
  animation: uvq10-sly-10 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r11 {
  border-color: color-mix(in oklab,var(--c1) 100%,var(--c2));
  transform: translate(0.4em,1.02em);
  animation: uvq10-sly-11 calc(3.2s / var(--k)) infinite;
}

@keyframes uvq10-sly-0 {
  0%,43.60% {
    transform: translate(0.40em,2.45em) rotate(0);
  }
  47.60% {
    transform: translate(0.48em,2.31em) rotate(4.40deg);
  }
  51.60% {
    transform: translate(0.71em,1.92em) rotate(17.19deg);
  }
  55.60% {
    transform: translate(1.06em,1.38em) rotate(37.10deg);
  }
  59.60% {
    transform: translate(1.51em,0.88em) rotate(62.19deg);
  }
  63.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  67.60% {
    transform: translate(2.49em,0.90em) rotate(117.81deg);
  }
  71.60% {
    transform: translate(2.94em,1.42em) rotate(142.90deg);
  }
  75.60% {
    transform: translate(3.29em,1.98em) rotate(162.81deg);
  }
  79.60% {
    transform: translate(3.52em,2.38em) rotate(175.60deg);
  }
  83.60%,100% {
    transform: translate(3.60em,2.52em) rotate(180deg);
  }
}

@keyframes uvq10-sly-1 {
  0%,40.00% {
    transform: translate(0.40em,2.32em) rotate(0);
  }
  44.00% {
    transform: translate(0.48em,2.19em) rotate(4.40deg);
  }
  48.00% {
    transform: translate(0.71em,1.82em) rotate(17.19deg);
  }
  52.00% {
    transform: translate(1.06em,1.30em) rotate(37.10deg);
  }
  56.00% {
    transform: translate(1.51em,0.84em) rotate(62.19deg);
  }
  60.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  64.00% {
    transform: translate(2.49em,0.94em) rotate(117.81deg);
  }
  68.00% {
    transform: translate(2.94em,1.50em) rotate(142.90deg);
  }
  72.00% {
    transform: translate(3.29em,2.09em) rotate(162.81deg);
  }
  76.00% {
    transform: translate(3.52em,2.50em) rotate(175.60deg);
  }
  80.00%,100% {
    transform: translate(3.60em,2.65em) rotate(180deg);
  }
}

@keyframes uvq10-sly-2 {
  0%,36.40% {
    transform: translate(0.40em,2.19em) rotate(0);
  }
  40.40% {
    transform: translate(0.48em,2.07em) rotate(4.40deg);
  }
  44.40% {
    transform: translate(0.71em,1.71em) rotate(17.19deg);
  }
  48.40% {
    transform: translate(1.06em,1.23em) rotate(37.10deg);
  }
  52.40% {
    transform: translate(1.51em,0.80em) rotate(62.19deg);
  }
  56.40% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  60.40% {
    transform: translate(2.49em,0.98em) rotate(117.81deg);
  }
  64.40% {
    transform: translate(2.94em,1.57em) rotate(142.90deg);
  }
  68.40% {
    transform: translate(3.29em,2.19em) rotate(162.81deg);
  }
  72.40% {
    transform: translate(3.52em,2.63em) rotate(175.60deg);
  }
  76.40%,100% {
    transform: translate(3.60em,2.78em) rotate(180deg);
  }
}

@keyframes uvq10-sly-3 {
  0%,32.80% {
    transform: translate(0.40em,2.06em) rotate(0);
  }
  36.80% {
    transform: translate(0.48em,1.94em) rotate(4.40deg);
  }
  40.80% {
    transform: translate(0.71em,1.61em) rotate(17.19deg);
  }
  44.80% {
    transform: translate(1.06em,1.15em) rotate(37.10deg);
  }
  48.80% {
    transform: translate(1.51em,0.76em) rotate(62.19deg);
  }
  52.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  56.80% {
    transform: translate(2.49em,1.02em) rotate(117.81deg);
  }
  60.80% {
    transform: translate(2.94em,1.65em) rotate(142.90deg);
  }
  64.80% {
    transform: translate(3.29em,2.30em) rotate(162.81deg);
  }
  68.80% {
    transform: translate(3.52em,2.75em) rotate(175.60deg);
  }
  72.80%,100% {
    transform: translate(3.60em,2.91em) rotate(180deg);
  }
}

@keyframes uvq10-sly-4 {
  0%,29.20% {
    transform: translate(0.40em,1.93em) rotate(0);
  }
  33.20% {
    transform: translate(0.48em,1.82em) rotate(4.40deg);
  }
  37.20% {
    transform: translate(0.71em,1.50em) rotate(17.19deg);
  }
  41.20% {
    transform: translate(1.06em,1.07em) rotate(37.10deg);
  }
  45.20% {
    transform: translate(1.51em,0.72em) rotate(62.19deg);
  }
  49.20% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  53.20% {
    transform: translate(2.49em,1.06em) rotate(117.81deg);
  }
  57.20% {
    transform: translate(2.94em,1.73em) rotate(142.90deg);
  }
  61.20% {
    transform: translate(3.29em,2.40em) rotate(162.81deg);
  }
  65.20% {
    transform: translate(3.52em,2.87em) rotate(175.60deg);
  }
  69.20%,100% {
    transform: translate(3.60em,3.04em) rotate(180deg);
  }
}

@keyframes uvq10-sly-5 {
  0%,25.60% {
    transform: translate(0.40em,1.80em) rotate(0);
  }
  29.60% {
    transform: translate(0.48em,1.70em) rotate(4.40deg);
  }
  33.60% {
    transform: translate(0.71em,1.40em) rotate(17.19deg);
  }
  37.60% {
    transform: translate(1.06em,1.00em) rotate(37.10deg);
  }
  41.60% {
    transform: translate(1.51em,0.68em) rotate(62.19deg);
  }
  45.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  49.60% {
    transform: translate(2.49em,1.10em) rotate(117.81deg);
  }
  53.60% {
    transform: translate(2.94em,1.80em) rotate(142.90deg);
  }
  57.60% {
    transform: translate(3.29em,2.51em) rotate(162.81deg);
  }
  61.60% {
    transform: translate(3.52em,3.00em) rotate(175.60deg);
  }
  65.60%,100% {
    transform: translate(3.60em,3.17em) rotate(180deg);
  }
}

@keyframes uvq10-sly-6 {
  0%,22.00% {
    transform: translate(0.40em,1.67em) rotate(0);
  }
  26.00% {
    transform: translate(0.48em,1.57em) rotate(4.40deg);
  }
  30.00% {
    transform: translate(0.71em,1.29em) rotate(17.19deg);
  }
  34.00% {
    transform: translate(1.06em,0.92em) rotate(37.10deg);
  }
  38.00% {
    transform: translate(1.51em,0.64em) rotate(62.19deg);
  }
  42.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  46.00% {
    transform: translate(2.49em,1.14em) rotate(117.81deg);
  }
  50.00% {
    transform: translate(2.94em,1.88em) rotate(142.90deg);
  }
  54.00% {
    transform: translate(3.29em,2.61em) rotate(162.81deg);
  }
  58.00% {
    transform: translate(3.52em,3.12em) rotate(175.60deg);
  }
  62.00%,100% {
    transform: translate(3.60em,3.30em) rotate(180deg);
  }
}

@keyframes uvq10-sly-7 {
  0%,18.40% {
    transform: translate(0.40em,1.54em) rotate(0);
  }
  22.40% {
    transform: translate(0.48em,1.45em) rotate(4.40deg);
  }
  26.40% {
    transform: translate(0.71em,1.19em) rotate(17.19deg);
  }
  30.40% {
    transform: translate(1.06em,0.84em) rotate(37.10deg);
  }
  34.40% {
    transform: translate(1.51em,0.60em) rotate(62.19deg);
  }
  38.40% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  42.40% {
    transform: translate(2.49em,1.18em) rotate(117.81deg);
  }
  46.40% {
    transform: translate(2.94em,1.95em) rotate(142.90deg);
  }
  50.40% {
    transform: translate(3.29em,2.72em) rotate(162.81deg);
  }
  54.40% {
    transform: translate(3.52em,3.25em) rotate(175.60deg);
  }
  58.40%,100% {
    transform: translate(3.60em,3.43em) rotate(180deg);
  }
}

@keyframes uvq10-sly-8 {
  0%,14.80% {
    transform: translate(0.40em,1.41em) rotate(0);
  }
  18.80% {
    transform: translate(0.48em,1.32em) rotate(4.40deg);
  }
  22.80% {
    transform: translate(0.71em,1.08em) rotate(17.19deg);
  }
  26.80% {
    transform: translate(1.06em,0.77em) rotate(37.10deg);
  }
  30.80% {
    transform: translate(1.51em,0.56em) rotate(62.19deg);
  }
  34.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  38.80% {
    transform: translate(2.49em,1.23em) rotate(117.81deg);
  }
  42.80% {
    transform: translate(2.94em,2.03em) rotate(142.90deg);
  }
  46.80% {
    transform: translate(3.29em,2.82em) rotate(162.81deg);
  }
  50.80% {
    transform: translate(3.52em,3.37em) rotate(175.60deg);
  }
  54.80%,100% {
    transform: translate(3.60em,3.56em) rotate(180deg);
  }
}

@keyframes uvq10-sly-9 {
  0%,11.20% {
    transform: translate(0.40em,1.28em) rotate(0);
  }
  15.20% {
    transform: translate(0.48em,1.20em) rotate(4.40deg);
  }
  19.20% {
    transform: translate(0.71em,0.98em) rotate(17.19deg);
  }
  23.20% {
    transform: translate(1.06em,0.69em) rotate(37.10deg);
  }
  27.20% {
    transform: translate(1.51em,0.52em) rotate(62.19deg);
  }
  31.20% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  35.20% {
    transform: translate(2.49em,1.27em) rotate(117.81deg);
  }
  39.20% {
    transform: translate(2.94em,2.11em) rotate(142.90deg);
  }
  43.20% {
    transform: translate(3.29em,2.93em) rotate(162.81deg);
  }
  47.20% {
    transform: translate(3.52em,3.49em) rotate(175.60deg);
  }
  51.20%,100% {
    transform: translate(3.60em,3.69em) rotate(180deg);
  }
}

@keyframes uvq10-sly-10 {
  0%,7.60% {
    transform: translate(0.40em,1.15em) rotate(0);
  }
  11.60% {
    transform: translate(0.48em,1.08em) rotate(4.40deg);
  }
  15.60% {
    transform: translate(0.71em,0.87em) rotate(17.19deg);
  }
  19.60% {
    transform: translate(1.06em,0.61em) rotate(37.10deg);
  }
  23.60% {
    transform: translate(1.51em,0.48em) rotate(62.19deg);
  }
  27.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  31.60% {
    transform: translate(2.49em,1.31em) rotate(117.81deg);
  }
  35.60% {
    transform: translate(2.94em,2.18em) rotate(142.90deg);
  }
  39.60% {
    transform: translate(3.29em,3.03em) rotate(162.81deg);
  }
  43.60% {
    transform: translate(3.52em,3.62em) rotate(175.60deg);
  }
  47.60%,100% {
    transform: translate(3.60em,3.82em) rotate(180deg);
  }
}

@keyframes uvq10-sly-11 {
  0%,4.00% {
    transform: translate(0.40em,1.02em) rotate(0);
  }
  8.00% {
    transform: translate(0.48em,0.95em) rotate(4.40deg);
  }
  12.00% {
    transform: translate(0.71em,0.77em) rotate(17.19deg);
  }
  16.00% {
    transform: translate(1.06em,0.54em) rotate(37.10deg);
  }
  20.00% {
    transform: translate(1.51em,0.44em) rotate(62.19deg);
  }
  24.00% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  28.00% {
    transform: translate(2.49em,1.35em) rotate(117.81deg);
  }
  32.00% {
    transform: translate(2.94em,2.26em) rotate(142.90deg);
  }
  36.00% {
    transform: translate(3.29em,3.14em) rotate(162.81deg);
  }
  40.00% {
    transform: translate(3.52em,3.74em) rotate(175.60deg);
  }
  44.00%,100% {
    transform: translate(3.60em,3.95em) rotate(180deg);
  }
}

@keyframes uvq10-sly {
  from {
    transform: translate(2.6em,.6em);
  }
  to {
    transform: translate(-.6em,-.9em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly,.uvq10-sly *,.uvq10-sly *::before,.uvq10-sly *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly .ly,.uvq10-sly .r {
    animation: none!important;
  }
}
```

### React

```tsx
import type { CSSProperties } from "react";

const css = `
.uvq10-sly {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 10em;
  height: 7em;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
  mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
}

.uvq10-sly .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.uvq10-sly .ly {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(2.6em,.6em);
  animation: uvq10-sly calc(3.2s / var(--k)) linear infinite;
}

.uvq10-sly .sp {
  position: absolute;
  left: calc(var(--j) * 3.2em);
  top: calc(3em + var(--j) * 1.5em);
  width: 3.2em;
  height: 12em;
  background: linear-gradient(color-mix(in srgb,var(--fg) 16%,var(--bg)) 0 .18em,color-mix(in srgb,var(--fg) 8%,var(--bg)) .18em);
  box-shadow: inset .12em 0 0 color-mix(in srgb,var(--fg) 14%,var(--bg));
}

.uvq10-sly .r {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 2.4em;
  height: .55em;
  border: .15em solid;
  border-radius: 50%;
  box-shadow: 0 .04em 0 rgba(0,0,0,.18);
}

.uvq10-sly .r0 {
  border-color: color-mix(in oklab,var(--c1) 0%,var(--c2));
  transform: translate(0.4em,2.45em);
  animation: uvq10-sly-0 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r1 {
  border-color: color-mix(in oklab,var(--c1) 9%,var(--c2));
  transform: translate(0.4em,2.32em);
  animation: uvq10-sly-1 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r2 {
  border-color: color-mix(in oklab,var(--c1) 18%,var(--c2));
  transform: translate(0.4em,2.19em);
  animation: uvq10-sly-2 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r3 {
  border-color: color-mix(in oklab,var(--c1) 27%,var(--c2));
  transform: translate(0.4em,2.06em);
  animation: uvq10-sly-3 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r4 {
  border-color: color-mix(in oklab,var(--c1) 36%,var(--c2));
  transform: translate(0.4em,1.93em);
  animation: uvq10-sly-4 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r5 {
  border-color: color-mix(in oklab,var(--c1) 45%,var(--c2));
  transform: translate(0.4em,1.80em);
  animation: uvq10-sly-5 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r6 {
  border-color: color-mix(in oklab,var(--c1) 55%,var(--c2));
  transform: translate(0.4em,1.67em);
  animation: uvq10-sly-6 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r7 {
  border-color: color-mix(in oklab,var(--c1) 64%,var(--c2));
  transform: translate(0.4em,1.54em);
  animation: uvq10-sly-7 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r8 {
  border-color: color-mix(in oklab,var(--c1) 73%,var(--c2));
  transform: translate(0.4em,1.41em);
  animation: uvq10-sly-8 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r9 {
  border-color: color-mix(in oklab,var(--c1) 82%,var(--c2));
  transform: translate(0.4em,1.28em);
  animation: uvq10-sly-9 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r10 {
  border-color: color-mix(in oklab,var(--c1) 91%,var(--c2));
  transform: translate(0.4em,1.15em);
  animation: uvq10-sly-10 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r11 {
  border-color: color-mix(in oklab,var(--c1) 100%,var(--c2));
  transform: translate(0.4em,1.02em);
  animation: uvq10-sly-11 calc(3.2s / var(--k)) infinite;
}

@keyframes uvq10-sly-0 {
  0%,43.60% {
    transform: translate(0.40em,2.45em) rotate(0);
  }
  47.60% {
    transform: translate(0.48em,2.31em) rotate(4.40deg);
  }
  51.60% {
    transform: translate(0.71em,1.92em) rotate(17.19deg);
  }
  55.60% {
    transform: translate(1.06em,1.38em) rotate(37.10deg);
  }
  59.60% {
    transform: translate(1.51em,0.88em) rotate(62.19deg);
  }
  63.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  67.60% {
    transform: translate(2.49em,0.90em) rotate(117.81deg);
  }
  71.60% {
    transform: translate(2.94em,1.42em) rotate(142.90deg);
  }
  75.60% {
    transform: translate(3.29em,1.98em) rotate(162.81deg);
  }
  79.60% {
    transform: translate(3.52em,2.38em) rotate(175.60deg);
  }
  83.60%,100% {
    transform: translate(3.60em,2.52em) rotate(180deg);
  }
}

@keyframes uvq10-sly-1 {
  0%,40.00% {
    transform: translate(0.40em,2.32em) rotate(0);
  }
  44.00% {
    transform: translate(0.48em,2.19em) rotate(4.40deg);
  }
  48.00% {
    transform: translate(0.71em,1.82em) rotate(17.19deg);
  }
  52.00% {
    transform: translate(1.06em,1.30em) rotate(37.10deg);
  }
  56.00% {
    transform: translate(1.51em,0.84em) rotate(62.19deg);
  }
  60.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  64.00% {
    transform: translate(2.49em,0.94em) rotate(117.81deg);
  }
  68.00% {
    transform: translate(2.94em,1.50em) rotate(142.90deg);
  }
  72.00% {
    transform: translate(3.29em,2.09em) rotate(162.81deg);
  }
  76.00% {
    transform: translate(3.52em,2.50em) rotate(175.60deg);
  }
  80.00%,100% {
    transform: translate(3.60em,2.65em) rotate(180deg);
  }
}

@keyframes uvq10-sly-2 {
  0%,36.40% {
    transform: translate(0.40em,2.19em) rotate(0);
  }
  40.40% {
    transform: translate(0.48em,2.07em) rotate(4.40deg);
  }
  44.40% {
    transform: translate(0.71em,1.71em) rotate(17.19deg);
  }
  48.40% {
    transform: translate(1.06em,1.23em) rotate(37.10deg);
  }
  52.40% {
    transform: translate(1.51em,0.80em) rotate(62.19deg);
  }
  56.40% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  60.40% {
    transform: translate(2.49em,0.98em) rotate(117.81deg);
  }
  64.40% {
    transform: translate(2.94em,1.57em) rotate(142.90deg);
  }
  68.40% {
    transform: translate(3.29em,2.19em) rotate(162.81deg);
  }
  72.40% {
    transform: translate(3.52em,2.63em) rotate(175.60deg);
  }
  76.40%,100% {
    transform: translate(3.60em,2.78em) rotate(180deg);
  }
}

@keyframes uvq10-sly-3 {
  0%,32.80% {
    transform: translate(0.40em,2.06em) rotate(0);
  }
  36.80% {
    transform: translate(0.48em,1.94em) rotate(4.40deg);
  }
  40.80% {
    transform: translate(0.71em,1.61em) rotate(17.19deg);
  }
  44.80% {
    transform: translate(1.06em,1.15em) rotate(37.10deg);
  }
  48.80% {
    transform: translate(1.51em,0.76em) rotate(62.19deg);
  }
  52.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  56.80% {
    transform: translate(2.49em,1.02em) rotate(117.81deg);
  }
  60.80% {
    transform: translate(2.94em,1.65em) rotate(142.90deg);
  }
  64.80% {
    transform: translate(3.29em,2.30em) rotate(162.81deg);
  }
  68.80% {
    transform: translate(3.52em,2.75em) rotate(175.60deg);
  }
  72.80%,100% {
    transform: translate(3.60em,2.91em) rotate(180deg);
  }
}

@keyframes uvq10-sly-4 {
  0%,29.20% {
    transform: translate(0.40em,1.93em) rotate(0);
  }
  33.20% {
    transform: translate(0.48em,1.82em) rotate(4.40deg);
  }
  37.20% {
    transform: translate(0.71em,1.50em) rotate(17.19deg);
  }
  41.20% {
    transform: translate(1.06em,1.07em) rotate(37.10deg);
  }
  45.20% {
    transform: translate(1.51em,0.72em) rotate(62.19deg);
  }
  49.20% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  53.20% {
    transform: translate(2.49em,1.06em) rotate(117.81deg);
  }
  57.20% {
    transform: translate(2.94em,1.73em) rotate(142.90deg);
  }
  61.20% {
    transform: translate(3.29em,2.40em) rotate(162.81deg);
  }
  65.20% {
    transform: translate(3.52em,2.87em) rotate(175.60deg);
  }
  69.20%,100% {
    transform: translate(3.60em,3.04em) rotate(180deg);
  }
}

@keyframes uvq10-sly-5 {
  0%,25.60% {
    transform: translate(0.40em,1.80em) rotate(0);
  }
  29.60% {
    transform: translate(0.48em,1.70em) rotate(4.40deg);
  }
  33.60% {
    transform: translate(0.71em,1.40em) rotate(17.19deg);
  }
  37.60% {
    transform: translate(1.06em,1.00em) rotate(37.10deg);
  }
  41.60% {
    transform: translate(1.51em,0.68em) rotate(62.19deg);
  }
  45.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  49.60% {
    transform: translate(2.49em,1.10em) rotate(117.81deg);
  }
  53.60% {
    transform: translate(2.94em,1.80em) rotate(142.90deg);
  }
  57.60% {
    transform: translate(3.29em,2.51em) rotate(162.81deg);
  }
  61.60% {
    transform: translate(3.52em,3.00em) rotate(175.60deg);
  }
  65.60%,100% {
    transform: translate(3.60em,3.17em) rotate(180deg);
  }
}

@keyframes uvq10-sly-6 {
  0%,22.00% {
    transform: translate(0.40em,1.67em) rotate(0);
  }
  26.00% {
    transform: translate(0.48em,1.57em) rotate(4.40deg);
  }
  30.00% {
    transform: translate(0.71em,1.29em) rotate(17.19deg);
  }
  34.00% {
    transform: translate(1.06em,0.92em) rotate(37.10deg);
  }
  38.00% {
    transform: translate(1.51em,0.64em) rotate(62.19deg);
  }
  42.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  46.00% {
    transform: translate(2.49em,1.14em) rotate(117.81deg);
  }
  50.00% {
    transform: translate(2.94em,1.88em) rotate(142.90deg);
  }
  54.00% {
    transform: translate(3.29em,2.61em) rotate(162.81deg);
  }
  58.00% {
    transform: translate(3.52em,3.12em) rotate(175.60deg);
  }
  62.00%,100% {
    transform: translate(3.60em,3.30em) rotate(180deg);
  }
}

@keyframes uvq10-sly-7 {
  0%,18.40% {
    transform: translate(0.40em,1.54em) rotate(0);
  }
  22.40% {
    transform: translate(0.48em,1.45em) rotate(4.40deg);
  }
  26.40% {
    transform: translate(0.71em,1.19em) rotate(17.19deg);
  }
  30.40% {
    transform: translate(1.06em,0.84em) rotate(37.10deg);
  }
  34.40% {
    transform: translate(1.51em,0.60em) rotate(62.19deg);
  }
  38.40% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  42.40% {
    transform: translate(2.49em,1.18em) rotate(117.81deg);
  }
  46.40% {
    transform: translate(2.94em,1.95em) rotate(142.90deg);
  }
  50.40% {
    transform: translate(3.29em,2.72em) rotate(162.81deg);
  }
  54.40% {
    transform: translate(3.52em,3.25em) rotate(175.60deg);
  }
  58.40%,100% {
    transform: translate(3.60em,3.43em) rotate(180deg);
  }
}

@keyframes uvq10-sly-8 {
  0%,14.80% {
    transform: translate(0.40em,1.41em) rotate(0);
  }
  18.80% {
    transform: translate(0.48em,1.32em) rotate(4.40deg);
  }
  22.80% {
    transform: translate(0.71em,1.08em) rotate(17.19deg);
  }
  26.80% {
    transform: translate(1.06em,0.77em) rotate(37.10deg);
  }
  30.80% {
    transform: translate(1.51em,0.56em) rotate(62.19deg);
  }
  34.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  38.80% {
    transform: translate(2.49em,1.23em) rotate(117.81deg);
  }
  42.80% {
    transform: translate(2.94em,2.03em) rotate(142.90deg);
  }
  46.80% {
    transform: translate(3.29em,2.82em) rotate(162.81deg);
  }
  50.80% {
    transform: translate(3.52em,3.37em) rotate(175.60deg);
  }
  54.80%,100% {
    transform: translate(3.60em,3.56em) rotate(180deg);
  }
}

@keyframes uvq10-sly-9 {
  0%,11.20% {
    transform: translate(0.40em,1.28em) rotate(0);
  }
  15.20% {
    transform: translate(0.48em,1.20em) rotate(4.40deg);
  }
  19.20% {
    transform: translate(0.71em,0.98em) rotate(17.19deg);
  }
  23.20% {
    transform: translate(1.06em,0.69em) rotate(37.10deg);
  }
  27.20% {
    transform: translate(1.51em,0.52em) rotate(62.19deg);
  }
  31.20% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  35.20% {
    transform: translate(2.49em,1.27em) rotate(117.81deg);
  }
  39.20% {
    transform: translate(2.94em,2.11em) rotate(142.90deg);
  }
  43.20% {
    transform: translate(3.29em,2.93em) rotate(162.81deg);
  }
  47.20% {
    transform: translate(3.52em,3.49em) rotate(175.60deg);
  }
  51.20%,100% {
    transform: translate(3.60em,3.69em) rotate(180deg);
  }
}

@keyframes uvq10-sly-10 {
  0%,7.60% {
    transform: translate(0.40em,1.15em) rotate(0);
  }
  11.60% {
    transform: translate(0.48em,1.08em) rotate(4.40deg);
  }
  15.60% {
    transform: translate(0.71em,0.87em) rotate(17.19deg);
  }
  19.60% {
    transform: translate(1.06em,0.61em) rotate(37.10deg);
  }
  23.60% {
    transform: translate(1.51em,0.48em) rotate(62.19deg);
  }
  27.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  31.60% {
    transform: translate(2.49em,1.31em) rotate(117.81deg);
  }
  35.60% {
    transform: translate(2.94em,2.18em) rotate(142.90deg);
  }
  39.60% {
    transform: translate(3.29em,3.03em) rotate(162.81deg);
  }
  43.60% {
    transform: translate(3.52em,3.62em) rotate(175.60deg);
  }
  47.60%,100% {
    transform: translate(3.60em,3.82em) rotate(180deg);
  }
}

@keyframes uvq10-sly-11 {
  0%,4.00% {
    transform: translate(0.40em,1.02em) rotate(0);
  }
  8.00% {
    transform: translate(0.48em,0.95em) rotate(4.40deg);
  }
  12.00% {
    transform: translate(0.71em,0.77em) rotate(17.19deg);
  }
  16.00% {
    transform: translate(1.06em,0.54em) rotate(37.10deg);
  }
  20.00% {
    transform: translate(1.51em,0.44em) rotate(62.19deg);
  }
  24.00% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  28.00% {
    transform: translate(2.49em,1.35em) rotate(117.81deg);
  }
  32.00% {
    transform: translate(2.94em,2.26em) rotate(142.90deg);
  }
  36.00% {
    transform: translate(3.29em,3.14em) rotate(162.81deg);
  }
  40.00% {
    transform: translate(3.52em,3.74em) rotate(175.60deg);
  }
  44.00%,100% {
    transform: translate(3.60em,3.95em) rotate(180deg);
  }
}

@keyframes uvq10-sly {
  from {
    transform: translate(2.6em,.6em);
  }
  to {
    transform: translate(-.6em,-.9em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly,.uvq10-sly *,.uvq10-sly *::before,.uvq10-sly *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly .ly,.uvq10-sly .r {
    animation: none!important;
  }
}
`;

export default function LdSlinkyStairs() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#f72585",
          "--c2": "#4cc9f0",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq10-sly" role="status"><span className="sr">Loading</span><div className="ly" aria-hidden="true"><i className="sp" style={{ "--j": "-2" } as CSSProperties}></i><i className="sp" style={{ "--j": "-1" } as CSSProperties}></i><i className="sp" style={{ "--j": "0" } as CSSProperties}></i><i className="sp" style={{ "--j": "1" } as CSSProperties}></i><i className="sp" style={{ "--j": "2" } as CSSProperties}></i><i className="sp" style={{ "--j": "3" } as CSSProperties}></i><i className="sp" style={{ "--j": "4" } as CSSProperties}></i><i className="sp" style={{ "--j": "5" } as CSSProperties}></i><i className="r r0"></i><i className="r r1"></i><i className="r r2"></i><i className="r r3"></i><i className="r r4"></i><i className="r r5"></i><i className="r r6"></i><i className="r r7"></i><i className="r r8"></i><i className="r r9"></i><i className="r r10"></i><i className="r r11"></i></div></div>
      </div>
    </>
  );
}
```

## Prompt for AI assistants

Paste this into ChatGPT, Claude, Cursor, v0 or Lovable to adapt the block to your stack (Tailwind, Vue, Svelte…):

````text
I want to add the “Slinky on the stairs loader” block (Loaders) from AIMRAN Library to my project.

## What it is
A rainbow spring walks down step by step: its coils leap over in an arc one after another and stack on the step below.

## Chosen settings
- Main color: #f72585
- Secondary color: #4cc9f0
- Size: 16px (from 12 to 24px)
- Speed: 1x (from 0.5 to 2x)

## What I need
1. Add it to my project with the same look and animation as the reference code: same sizes, colours, radii, shadows, timings and easing.
2. It is built with plain HTML and CSS (the reference wraps it in a React component with its CSS). If my project uses something else (Vue, Svelte, Astro, plain HTML…), translate it without losing any behaviour. If I use Tailwind, turn the styles into classes; if not, keep the CSS in its own file.
3. Expose the settings above as props (or CSS variables) with those values as defaults.
4. Make it work well on phones: nothing that depends only on hover, touch targets of at least 44 px and no overflow on 320 px screens.
5. Make it look right in light and dark mode.
6. Keep it accessible: semantic HTML, roles and aria-* where needed, visible focus and keyboard support.
7. Respect prefers-reduced-motion: with reduced motion, no big animations but the same end result.

## Reference code
```tsx
import type { CSSProperties } from "react";

const css = `
.uvq10-sly {
  font-family: -apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;
  font-size: var(--s);
  color: var(--fg);
  -webkit-tap-highlight-color: transparent;
  position: relative;
  width: 10em;
  height: 7em;
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
  mask: linear-gradient(90deg,transparent,#000 1em calc(100% - 1em),transparent);
}

.uvq10-sly .sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.uvq10-sly .ly {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(2.6em,.6em);
  animation: uvq10-sly calc(3.2s / var(--k)) linear infinite;
}

.uvq10-sly .sp {
  position: absolute;
  left: calc(var(--j) * 3.2em);
  top: calc(3em + var(--j) * 1.5em);
  width: 3.2em;
  height: 12em;
  background: linear-gradient(color-mix(in srgb,var(--fg) 16%,var(--bg)) 0 .18em,color-mix(in srgb,var(--fg) 8%,var(--bg)) .18em);
  box-shadow: inset .12em 0 0 color-mix(in srgb,var(--fg) 14%,var(--bg));
}

.uvq10-sly .r {
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 2.4em;
  height: .55em;
  border: .15em solid;
  border-radius: 50%;
  box-shadow: 0 .04em 0 rgba(0,0,0,.18);
}

.uvq10-sly .r0 {
  border-color: color-mix(in oklab,var(--c1) 0%,var(--c2));
  transform: translate(0.4em,2.45em);
  animation: uvq10-sly-0 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r1 {
  border-color: color-mix(in oklab,var(--c1) 9%,var(--c2));
  transform: translate(0.4em,2.32em);
  animation: uvq10-sly-1 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r2 {
  border-color: color-mix(in oklab,var(--c1) 18%,var(--c2));
  transform: translate(0.4em,2.19em);
  animation: uvq10-sly-2 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r3 {
  border-color: color-mix(in oklab,var(--c1) 27%,var(--c2));
  transform: translate(0.4em,2.06em);
  animation: uvq10-sly-3 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r4 {
  border-color: color-mix(in oklab,var(--c1) 36%,var(--c2));
  transform: translate(0.4em,1.93em);
  animation: uvq10-sly-4 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r5 {
  border-color: color-mix(in oklab,var(--c1) 45%,var(--c2));
  transform: translate(0.4em,1.80em);
  animation: uvq10-sly-5 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r6 {
  border-color: color-mix(in oklab,var(--c1) 55%,var(--c2));
  transform: translate(0.4em,1.67em);
  animation: uvq10-sly-6 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r7 {
  border-color: color-mix(in oklab,var(--c1) 64%,var(--c2));
  transform: translate(0.4em,1.54em);
  animation: uvq10-sly-7 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r8 {
  border-color: color-mix(in oklab,var(--c1) 73%,var(--c2));
  transform: translate(0.4em,1.41em);
  animation: uvq10-sly-8 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r9 {
  border-color: color-mix(in oklab,var(--c1) 82%,var(--c2));
  transform: translate(0.4em,1.28em);
  animation: uvq10-sly-9 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r10 {
  border-color: color-mix(in oklab,var(--c1) 91%,var(--c2));
  transform: translate(0.4em,1.15em);
  animation: uvq10-sly-10 calc(3.2s / var(--k)) infinite;
}

.uvq10-sly .r11 {
  border-color: color-mix(in oklab,var(--c1) 100%,var(--c2));
  transform: translate(0.4em,1.02em);
  animation: uvq10-sly-11 calc(3.2s / var(--k)) infinite;
}

@keyframes uvq10-sly-0 {
  0%,43.60% {
    transform: translate(0.40em,2.45em) rotate(0);
  }
  47.60% {
    transform: translate(0.48em,2.31em) rotate(4.40deg);
  }
  51.60% {
    transform: translate(0.71em,1.92em) rotate(17.19deg);
  }
  55.60% {
    transform: translate(1.06em,1.38em) rotate(37.10deg);
  }
  59.60% {
    transform: translate(1.51em,0.88em) rotate(62.19deg);
  }
  63.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  67.60% {
    transform: translate(2.49em,0.90em) rotate(117.81deg);
  }
  71.60% {
    transform: translate(2.94em,1.42em) rotate(142.90deg);
  }
  75.60% {
    transform: translate(3.29em,1.98em) rotate(162.81deg);
  }
  79.60% {
    transform: translate(3.52em,2.38em) rotate(175.60deg);
  }
  83.60%,100% {
    transform: translate(3.60em,2.52em) rotate(180deg);
  }
}

@keyframes uvq10-sly-1 {
  0%,40.00% {
    transform: translate(0.40em,2.32em) rotate(0);
  }
  44.00% {
    transform: translate(0.48em,2.19em) rotate(4.40deg);
  }
  48.00% {
    transform: translate(0.71em,1.82em) rotate(17.19deg);
  }
  52.00% {
    transform: translate(1.06em,1.30em) rotate(37.10deg);
  }
  56.00% {
    transform: translate(1.51em,0.84em) rotate(62.19deg);
  }
  60.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  64.00% {
    transform: translate(2.49em,0.94em) rotate(117.81deg);
  }
  68.00% {
    transform: translate(2.94em,1.50em) rotate(142.90deg);
  }
  72.00% {
    transform: translate(3.29em,2.09em) rotate(162.81deg);
  }
  76.00% {
    transform: translate(3.52em,2.50em) rotate(175.60deg);
  }
  80.00%,100% {
    transform: translate(3.60em,2.65em) rotate(180deg);
  }
}

@keyframes uvq10-sly-2 {
  0%,36.40% {
    transform: translate(0.40em,2.19em) rotate(0);
  }
  40.40% {
    transform: translate(0.48em,2.07em) rotate(4.40deg);
  }
  44.40% {
    transform: translate(0.71em,1.71em) rotate(17.19deg);
  }
  48.40% {
    transform: translate(1.06em,1.23em) rotate(37.10deg);
  }
  52.40% {
    transform: translate(1.51em,0.80em) rotate(62.19deg);
  }
  56.40% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  60.40% {
    transform: translate(2.49em,0.98em) rotate(117.81deg);
  }
  64.40% {
    transform: translate(2.94em,1.57em) rotate(142.90deg);
  }
  68.40% {
    transform: translate(3.29em,2.19em) rotate(162.81deg);
  }
  72.40% {
    transform: translate(3.52em,2.63em) rotate(175.60deg);
  }
  76.40%,100% {
    transform: translate(3.60em,2.78em) rotate(180deg);
  }
}

@keyframes uvq10-sly-3 {
  0%,32.80% {
    transform: translate(0.40em,2.06em) rotate(0);
  }
  36.80% {
    transform: translate(0.48em,1.94em) rotate(4.40deg);
  }
  40.80% {
    transform: translate(0.71em,1.61em) rotate(17.19deg);
  }
  44.80% {
    transform: translate(1.06em,1.15em) rotate(37.10deg);
  }
  48.80% {
    transform: translate(1.51em,0.76em) rotate(62.19deg);
  }
  52.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  56.80% {
    transform: translate(2.49em,1.02em) rotate(117.81deg);
  }
  60.80% {
    transform: translate(2.94em,1.65em) rotate(142.90deg);
  }
  64.80% {
    transform: translate(3.29em,2.30em) rotate(162.81deg);
  }
  68.80% {
    transform: translate(3.52em,2.75em) rotate(175.60deg);
  }
  72.80%,100% {
    transform: translate(3.60em,2.91em) rotate(180deg);
  }
}

@keyframes uvq10-sly-4 {
  0%,29.20% {
    transform: translate(0.40em,1.93em) rotate(0);
  }
  33.20% {
    transform: translate(0.48em,1.82em) rotate(4.40deg);
  }
  37.20% {
    transform: translate(0.71em,1.50em) rotate(17.19deg);
  }
  41.20% {
    transform: translate(1.06em,1.07em) rotate(37.10deg);
  }
  45.20% {
    transform: translate(1.51em,0.72em) rotate(62.19deg);
  }
  49.20% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  53.20% {
    transform: translate(2.49em,1.06em) rotate(117.81deg);
  }
  57.20% {
    transform: translate(2.94em,1.73em) rotate(142.90deg);
  }
  61.20% {
    transform: translate(3.29em,2.40em) rotate(162.81deg);
  }
  65.20% {
    transform: translate(3.52em,2.87em) rotate(175.60deg);
  }
  69.20%,100% {
    transform: translate(3.60em,3.04em) rotate(180deg);
  }
}

@keyframes uvq10-sly-5 {
  0%,25.60% {
    transform: translate(0.40em,1.80em) rotate(0);
  }
  29.60% {
    transform: translate(0.48em,1.70em) rotate(4.40deg);
  }
  33.60% {
    transform: translate(0.71em,1.40em) rotate(17.19deg);
  }
  37.60% {
    transform: translate(1.06em,1.00em) rotate(37.10deg);
  }
  41.60% {
    transform: translate(1.51em,0.68em) rotate(62.19deg);
  }
  45.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  49.60% {
    transform: translate(2.49em,1.10em) rotate(117.81deg);
  }
  53.60% {
    transform: translate(2.94em,1.80em) rotate(142.90deg);
  }
  57.60% {
    transform: translate(3.29em,2.51em) rotate(162.81deg);
  }
  61.60% {
    transform: translate(3.52em,3.00em) rotate(175.60deg);
  }
  65.60%,100% {
    transform: translate(3.60em,3.17em) rotate(180deg);
  }
}

@keyframes uvq10-sly-6 {
  0%,22.00% {
    transform: translate(0.40em,1.67em) rotate(0);
  }
  26.00% {
    transform: translate(0.48em,1.57em) rotate(4.40deg);
  }
  30.00% {
    transform: translate(0.71em,1.29em) rotate(17.19deg);
  }
  34.00% {
    transform: translate(1.06em,0.92em) rotate(37.10deg);
  }
  38.00% {
    transform: translate(1.51em,0.64em) rotate(62.19deg);
  }
  42.00% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  46.00% {
    transform: translate(2.49em,1.14em) rotate(117.81deg);
  }
  50.00% {
    transform: translate(2.94em,1.88em) rotate(142.90deg);
  }
  54.00% {
    transform: translate(3.29em,2.61em) rotate(162.81deg);
  }
  58.00% {
    transform: translate(3.52em,3.12em) rotate(175.60deg);
  }
  62.00%,100% {
    transform: translate(3.60em,3.30em) rotate(180deg);
  }
}

@keyframes uvq10-sly-7 {
  0%,18.40% {
    transform: translate(0.40em,1.54em) rotate(0);
  }
  22.40% {
    transform: translate(0.48em,1.45em) rotate(4.40deg);
  }
  26.40% {
    transform: translate(0.71em,1.19em) rotate(17.19deg);
  }
  30.40% {
    transform: translate(1.06em,0.84em) rotate(37.10deg);
  }
  34.40% {
    transform: translate(1.51em,0.60em) rotate(62.19deg);
  }
  38.40% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  42.40% {
    transform: translate(2.49em,1.18em) rotate(117.81deg);
  }
  46.40% {
    transform: translate(2.94em,1.95em) rotate(142.90deg);
  }
  50.40% {
    transform: translate(3.29em,2.72em) rotate(162.81deg);
  }
  54.40% {
    transform: translate(3.52em,3.25em) rotate(175.60deg);
  }
  58.40%,100% {
    transform: translate(3.60em,3.43em) rotate(180deg);
  }
}

@keyframes uvq10-sly-8 {
  0%,14.80% {
    transform: translate(0.40em,1.41em) rotate(0);
  }
  18.80% {
    transform: translate(0.48em,1.32em) rotate(4.40deg);
  }
  22.80% {
    transform: translate(0.71em,1.08em) rotate(17.19deg);
  }
  26.80% {
    transform: translate(1.06em,0.77em) rotate(37.10deg);
  }
  30.80% {
    transform: translate(1.51em,0.56em) rotate(62.19deg);
  }
  34.80% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  38.80% {
    transform: translate(2.49em,1.23em) rotate(117.81deg);
  }
  42.80% {
    transform: translate(2.94em,2.03em) rotate(142.90deg);
  }
  46.80% {
    transform: translate(3.29em,2.82em) rotate(162.81deg);
  }
  50.80% {
    transform: translate(3.52em,3.37em) rotate(175.60deg);
  }
  54.80%,100% {
    transform: translate(3.60em,3.56em) rotate(180deg);
  }
}

@keyframes uvq10-sly-9 {
  0%,11.20% {
    transform: translate(0.40em,1.28em) rotate(0);
  }
  15.20% {
    transform: translate(0.48em,1.20em) rotate(4.40deg);
  }
  19.20% {
    transform: translate(0.71em,0.98em) rotate(17.19deg);
  }
  23.20% {
    transform: translate(1.06em,0.69em) rotate(37.10deg);
  }
  27.20% {
    transform: translate(1.51em,0.52em) rotate(62.19deg);
  }
  31.20% {
    transform: translate(2.00em,0.69em) rotate(90.00deg);
  }
  35.20% {
    transform: translate(2.49em,1.27em) rotate(117.81deg);
  }
  39.20% {
    transform: translate(2.94em,2.11em) rotate(142.90deg);
  }
  43.20% {
    transform: translate(3.29em,2.93em) rotate(162.81deg);
  }
  47.20% {
    transform: translate(3.52em,3.49em) rotate(175.60deg);
  }
  51.20%,100% {
    transform: translate(3.60em,3.69em) rotate(180deg);
  }
}

@keyframes uvq10-sly-10 {
  0%,7.60% {
    transform: translate(0.40em,1.15em) rotate(0);
  }
  11.60% {
    transform: translate(0.48em,1.08em) rotate(4.40deg);
  }
  15.60% {
    transform: translate(0.71em,0.87em) rotate(17.19deg);
  }
  19.60% {
    transform: translate(1.06em,0.61em) rotate(37.10deg);
  }
  23.60% {
    transform: translate(1.51em,0.48em) rotate(62.19deg);
  }
  27.60% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  31.60% {
    transform: translate(2.49em,1.31em) rotate(117.81deg);
  }
  35.60% {
    transform: translate(2.94em,2.18em) rotate(142.90deg);
  }
  39.60% {
    transform: translate(3.29em,3.03em) rotate(162.81deg);
  }
  43.60% {
    transform: translate(3.52em,3.62em) rotate(175.60deg);
  }
  47.60%,100% {
    transform: translate(3.60em,3.82em) rotate(180deg);
  }
}

@keyframes uvq10-sly-11 {
  0%,4.00% {
    transform: translate(0.40em,1.02em) rotate(0);
  }
  8.00% {
    transform: translate(0.48em,0.95em) rotate(4.40deg);
  }
  12.00% {
    transform: translate(0.71em,0.77em) rotate(17.19deg);
  }
  16.00% {
    transform: translate(1.06em,0.54em) rotate(37.10deg);
  }
  20.00% {
    transform: translate(1.51em,0.44em) rotate(62.19deg);
  }
  24.00% {
    transform: translate(2.00em,0.68em) rotate(90.00deg);
  }
  28.00% {
    transform: translate(2.49em,1.35em) rotate(117.81deg);
  }
  32.00% {
    transform: translate(2.94em,2.26em) rotate(142.90deg);
  }
  36.00% {
    transform: translate(3.29em,3.14em) rotate(162.81deg);
  }
  40.00% {
    transform: translate(3.52em,3.74em) rotate(175.60deg);
  }
  44.00%,100% {
    transform: translate(3.60em,3.95em) rotate(180deg);
  }
}

@keyframes uvq10-sly {
  from {
    transform: translate(2.6em,.6em);
  }
  to {
    transform: translate(-.6em,-.9em);
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly,.uvq10-sly *,.uvq10-sly *::before,.uvq10-sly *::after {
    animation-duration: .01ms!important;
    animation-iteration-count: 1!important;
    transition-duration: .01ms!important;
  }
}

@media (prefers-reduced-motion:reduce) {
  .uvq10-sly .ly,.uvq10-sly .r {
    animation: none!important;
  }
}
`;

export default function LdSlinkyStairs() {
  return (
    <>
      <style>{css}</style>
      <div
        style={{
          "--c1": "#f72585",
          "--c2": "#4cc9f0",
          "--s": "16px",
          "--k": "1",
          "--fg": "#1d1d1f",
          "--bg": "#f5f5f7",
        } as CSSProperties}
      >
        <div className="uvq10-sly" role="status"><span className="sr">Loading</span><div className="ly" aria-hidden="true"><i className="sp" style={{ "--j": "-2" } as CSSProperties}></i><i className="sp" style={{ "--j": "-1" } as CSSProperties}></i><i className="sp" style={{ "--j": "0" } as CSSProperties}></i><i className="sp" style={{ "--j": "1" } as CSSProperties}></i><i className="sp" style={{ "--j": "2" } as CSSProperties}></i><i className="sp" style={{ "--j": "3" } as CSSProperties}></i><i className="sp" style={{ "--j": "4" } as CSSProperties}></i><i className="sp" style={{ "--j": "5" } as CSSProperties}></i><i className="r r0"></i><i className="r r1"></i><i className="r r2"></i><i className="r r3"></i><i className="r r4"></i><i className="r r5"></i><i className="r r6"></i><i className="r r7"></i><i className="r r8"></i><i className="r r9"></i><i className="r r10"></i><i className="r r11"></i></div></div>
      </div>
    </>
  );
}
```

Give me the complete final code, ready to paste, and tell me in one line where to put it in my project.
````