A playful, pill-shaped linear progress bar with a turf-green grass fill and a soccer ball thumb that slides as progress grows. Perfect for sports apps, gamified onboarding, challenges, and any UI that needs a themed meter with instant personality.

Functionality

• Grass-textured fill inside a rounded track for a stadium vibe.

• Soccer ball thumb that marks the current value and animates smoothly.

• Inline percentage label (show/hide, inside/outside placement).

• Configurable range: 0–100% (or custom min/max) with step precision.

• Animated progress with tunable duration and easing.

• Direction control: left→right or right→left (RTL friendly).

• Track styling: thickness, radius, border, shadow, and background tint.

• Theme options: replace textures/colors (e.g., team colors, gradients).

• States & thresholds: success/warning/danger color rules.

• Callbacks: onChange/onComplete for rewards or next-step triggers.

• Data-ready: bind to Firestore/Supabase/REST/local state.

• Light/Dark support and accessible labels for screen readers.

• Performance-minded: minimal rebuilds, GPU-accelerated animation.

• Responsive: scales for cards, headers, or full-width status bars.

Great for: match trackers, fan engagement, training goals, challenge meters, fitness progress, loyalty levels, or any sports-themed KPI.

Keywords: soccer progress bar, football progress bar, linear progress, pill bar, grass texture, ball thumb, percentage label, animated progress, gamified UI, sports app widget, match tracker, goal meter, stamina bar, challenge meter, fitness progress, fan engagement, themed progress, team colors, gradient fill, threshold colors, success warning danger, RTL support, responsive design, FlutterFlow component, Flutter widget, data binding, Firestore, Supabase, REST API, accessibility, dark mode, light mode, microinteractions, smooth animation, mobile UI, dashboard widget.