Subtle progress indicator that stays out of the way until you need it
A lightweight UI element that shows a small "fill" or progress marker. It uses a minimal HTML structure and CSS to remain hidden when inactive and appear when you want to indicate filling, loading, or progress. Easy to drop into existing layouts and customize to match your design.
Benefits
Reduces user uncertainty by visibly showing when a process is progressing.
Keeps the interface clean by staying hidden when not needed.
Makes interactions feel more responsive, which can improve task completion.
Simple customization lets you match brand colors and timings without reworking layout.
Quick to integrate so you spend less time wiring up UI feedback.
Features
Compact circular "ball" indicator that can be shown or hidden.
Minimal HTML structure: container with a single ball element for easy styling.
Hidden by default via inline style; show/hide via a class toggle or attribute change.
CSS-driven animation with optional JavaScript control for more complex behaviors.
Built with accessibility in mind—supports adding ARIA attributes when needed.
No external libraries required; works with plain HTML/CSS/JS.
Specifications
Default HTML structure: div#dd-fill-indicator-container > div[dd-fill-ball="true"] > div.ball
Default visibility: hidden (inline style)
Default ball diameter: 12 px
Default container height: 24 px
Default color: #007BFF (customizable via CSS)
Default animation duration: 0.6 s (adjustable with CSS variables)
