A circular, full-cover video player wrapped by an animated progress ring. The perimeter ring tracks playback with a moving head, while a compact duration chip keeps time visible. Minimal, elegant, and responsive—perfect when you want motion without heavy chrome.

Functionality

• Circular mask with edge-to-edge “cover” scaling

• Animated perimeter progress ring with moving head/knob

• Optional ring scrubbing (drag along the arc to seek)

• Tap to play/pause; optional centered play button

• Duration chip (mm:ss) with high-contrast background

• Autoplay, loop, start-at-position, muted start

• Poster/thumbnail lazy loading for faster first paint

• Buffering state and error/retry fallback

• Theming: ring thickness, colors, glow, overlay opacity, shadow

• Accessibility: large hit targets and screen-reader labels

• Keyboard (web) + gesture support (tap/drag/hold)

• Analytics hooks: play, pause, seek, complete

• Works with MP4 and HLS; mobile & web responsive

Use cases

• Avatar/profile tiles with subtle video loops

• Circular hero blocks on modern landing pages

• Product teasers and micro-promos

• Portfolio grids and gallery cards

• Music/podcast covers with ambient motion

• Social widgets and story highlights

• Onboarding moments and status/success screens

• Minimal blog or editorial embeds

Keywords
circular video, round video player, progress ring, radial progress, ring scrub, circular mask, full-cover scaling, play button, tap to play, autoplay, loop video, muted start, duration chip, time badge, poster image, lazy loading, buffering indicator, error fallback, gesture controls, keyboard controls, responsive video, mobile web video, HLS, MP4, adaptive scaling, premium styling, soft shadow, minimal UI, hero section video, avatar video, product teaser, portfolio grid, gallery card, analytics events, smooth playback, Flutter widget, FlutterFlow component.