Fill Indicator Component

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)
• Estimated minified asset size (CSS + minimal JS): ~1.2 KB
• Dependencies: none
• Browser compatibility: modern browsers (Chrome, Firefox, Edge, Safari — last 2 versions)
• Accessibility: supports adding role and aria-live attributes as needed
• Version: 1.0.0