Dominik Rubröder

UX Engineer@mediawave

Loading...

Modify

Base

Theme

Appearance

Color

Typography

Font Size

Animation

Enable Animations

Border

Radius

Style

Width

GitHub
LinkedIn
Instagram

Certified in:

Atomic Design Subatomic

Design your vision. Live your balance.

Next.js 16.3.4|React 19.2.8|Tailwind CSS 4.3.3

Contact:dominik.rubroeder@icloud.com

© 2026Dominik Rubröder

Design with code, code by design | Dominik Rubröder, UX Engineer

90

Animated Progress

Indicate the progress of state in a circular shape, similar to the iOS battery status widget

Built with

React
Motion
Tailwind CSS

Component Directive

'use client'

Client Component

References

https://motion.dev/docs/react-use-animate
https://motion.dev/docs/react-use-in-view