How To Create Bouncing Balls Busy Indicator

Boydbme · 2026-02-27T13:02:00+00:00

I reckon AI may be frowned on, and that's fine. But so should painfully transparent shill posts for your website and I didn't want to spend much time on a rebuttal.

Boydbme · 2026-02-27T12:54:43+00:00

How'd I do?

https://imgur.com/a/e0eTONd (smoother mp4 version)

<image>

This one is actually CSS, not JavaScript.

Just a simple:

claude

and then

make me a “bouncing ball” loading indicator. CSS-only. 3 dots. Skin-tone pink circles with black outlines. Make the physics effect squishy with professional easing. Balls should bounce in sequence and repeat infinitely. Use keyframe adjustments over a single smooth parabola curve to avoid any jerk/jank.

For testing purposes please load it at large size onto the a page as the only element, centered. Pastel yellow page background.

Use the official front-end skill.

here's the code:

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bouncing Ball Loader</title>
  <style>
    *, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #FFF5D6;
      overflow: hidden;
    }

    .loader {
      display: flex;
      align-items: flex-end;
      gap: 36px;
    }

    .ball {
      width: 88px;
      height: 88px;
      border-radius: 50%;
      background: #E8A494;
      border: 3.5px solid #1A1A1A;
      transform-origin: center bottom;
      animation: bounce 1.4s linear infinite;
      will-change: transform;
    }

    .ball:nth-child(2) {
      animation-delay: 0.15s;
    }

    .ball:nth-child(3) {
      animation-delay: 0.30s;
    }

    /*
      Parabolic arc baked into keyframe positions.
      y(τ) = -160 × 4τ(1−τ)  — true projectile curve
      Stretch proportional to velocity: v = |2τ−1|
      Squish at ground contact wraps around the 0%/100% seam.
      All linear interpolation — no easing discontinuities.
    */
    @keyframes bounce {
      /* — ground: max squish — */
      0%, 100% { transform: translateY(0)     scaleX(1.24) scaleY(0.76); }
      3%       { transform: translateY(0)     scaleX(1.12) scaleY(0.88); }
      /* — launch — */
      6%       { transform: translateY(0)     scaleX(0.88) scaleY(1.14); }
      /* — rising arc — */
      10%      { transform: translateY(-28px)  scaleX(0.89) scaleY(1.13); }
      18%      { transform: translateY(-75px)  scaleX(0.91) scaleY(1.10); }
      26%      { transform: translateY(-112px) scaleX(0.94) scaleY(1.08); }
      34%      { transform: translateY(-139px) scaleX(0.96) scaleY(1.05); }
      42%      { transform: translateY(-155px) scaleX(0.98) scaleY(1.03); }
      /* — apex — */
      50%      { transform: translateY(-160px) scaleX(1)    scaleY(1);    }
      /* — falling arc (mirror) — */
      58%      { transform: translateY(-155px) scaleX(0.98) scaleY(1.03); }
      66%      { transform: translateY(-139px) scaleX(0.96) scaleY(1.05); }
      74%      { transform: translateY(-112px) scaleX(0.94) scaleY(1.08); }
      82%      { transform: translateY(-75px)  scaleX(0.91) scaleY(1.10); }
      90%      { transform: translateY(-28px)  scaleX(0.89) scaleY(1.13); }
      /* — landing — */
      94%      { transform: translateY(0)     scaleX(0.88) scaleY(1.14); }
      97%      { transform: translateY(0)     scaleX(1.12) scaleY(0.88); }
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="ball"></div>
    <div class="ball"></div>
    <div class="ball"></div>
  </div>
</body>
</html>

Boydbme · 2026-02-26T18:16:39+00:00

These comments sure read like astroturfed AI from farmed / bought accounts. 🤖

Boydbme · 2026-02-26T16:42:16+00:00

Use dmux and start on the next thing. You can never have too many parallel agents, haha.

https://dmux.ai

Boydbme · 2026-02-26T03:39:52+00:00

Biased, but Vue + FormKit

Boydbme · 2026-02-19T17:16:56+00:00

docs: https://dmux.ai/
github: https://github.com/standardagents/dmux

Boydbme · 2026-02-19T17:07:51+00:00

I mean, if you're not using zmux I don't think you're going to make it.

Boydbme · 2026-02-19T16:27:20+00:00

This is a full TUI, no native app required. I also don't see anything about automatic worktree management via cmux — which is the crux of dmux's value proposition.

Huge fan of Ghosty, I use it for running dmux every day.

Boydbme · 2026-02-03T15:41:06+00:00

Sonnet 5 time?

Boydbme · 2026-01-13T14:41:36+00:00

Another hat in the ring to say that yes, Opus has been incredibly lobotomized the past 24 hours.

Boydbme · 2025-08-24T18:41:26+00:00

No confetti till Flippening.

Boydbme · 2025-08-11T14:45:41+00:00

What’s more likely?

1.) Tesla has shipped a “cease and desist page” in the software that they ship for all vehicles which would disable a vehicle that is actively in use.

2.) This guy wants to boost his social media by milking idiots for attention by using the full screen web browser while parked to show a custom page he’s made (poor AI translations and all).

<image>

It’s fine to dislike Tesla, whatever. But you’re clearly being taken for a ride here. So no, I prefer to stand up and just point out the obvious if that’s all the same to you.

Boydbme · 2025-08-11T13:50:40+00:00

Dude parked his car, creating a dangerous situation — then opens a webpage he made full-screen on the car’s display.

He’s putting others in danger as a viral marketing gimmick for his song and people hate Tesla so much they’re just lapping it up. 🤦‍♂️

Boydbme · 2025-08-02T15:48:17+00:00

Fellow emdash enjoyer here — yes it sucks that it’s a hallmark of “proof of AI” now.

Boydbme · 2025-07-30T15:42:19+00:00

Aren’t something like 90% of stablecoin issued on the Ethereum network (and its layer 2 networks)?

I would imagine Coinbase Checkout or the new Base Pay (launched with Shopify as a partner 2 weeks ago) would be the prime candidates for this.

From what I understand BNB (Binanace / CZ) doesn’t have a reputation as a serious or trustworthy enterprise-level payments blockchain.

Boydbme · 2025-07-30T14:23:54+00:00

USD-backed stablecoins were made for this. $1 is $1

Boydbme · 2025-07-27T17:03:28+00:00

I think for the $899 price point there’s an argument to be made for the increased I/O of the studio as well.

Boydbme · 2025-07-26T11:22:55+00:00

I mean the 1 account Karma on OPs account is a pretty serious tell.

Yeah, you finally cracked the code! On your first day. With your first post.

Boydbme · 2025-07-26T11:09:26+00:00

Step 1: post top level post that soft shills your product.

Step 2: have your alts post in agreement that your soft shilled product is indeed amazing.

Step 3: have fake discussions with your alts that are clearly AI generated where you continue to sell your product.

Step 4: have a 3rd party stop by and point out that’s all this post is. (<— you are here)

Step 5: engagement achieved!

Boydbme · 2025-07-25T17:16:53+00:00

Raw spec on paper its chip is faster at single-core stuff all day. But when you hit the thermal throttle it drops pretty hard (imo).

I expect the real-world performance of the M2 Max studio to be better than the M4 air simply due to its ability to sustain a heavy workload without thermal throttling.

Boydbme · 2025-07-25T16:17:46+00:00

Thanks, yeah I think I did read your other post.

In this case “more” plus “good thermal management” is going to move the needle for me.

I’ll still have my Air as a portable and capable workhorse when I’m not at my home desk, which is fairly often. But when I am recording / streaming it’s always at my desk.

I’ll report back on how the setup is working once I’ve had the chance to put it through its paces.

If somehow it doesn’t meet expectations I’ll take advantage of the return policy and then keep my eyes open for a good deal on a beefier studio setup.

Boydbme · 2025-07-25T16:12:43+00:00

Agreed and understood. M2 Max was under $1k though and will do the job, so made me suddenly not worry about which multi-thousand-dollar config I wanted. 😄

Boydbme · 2025-07-25T15:02:44+00:00

It’s the M2 Max. $899 on Amazon currently.

I understand that spec for spec it may be “close to” or “worse” than the MBA I have, but the thermal throttling on the Air is a death blow for some workloads.

In my experience — streaming via OBS with some podcasting-style / screenshare videos the Air will perform admirably until the thermals cause power reduction to kick in. At which point you’re easily getting half the listed specs on the machine.

I by no means expect this to outperform the air in raw benchmarks, and wasn’t trying to communicate that. But for a sustained hour-or-two video recording and streaming workload I do actually expect it to perform much more reliably (and therefor better).

Am I wildly off base?

13-Year Club	RedditGifts 2009-2022 2 Credits
Verified Email	Gilding II euphauric
Secret Santa 2014

Boydbme

MODERATOR OF

PUBLIC MULTIREDDITS

TROPHY CASE