Animated Circle Indicator

A customizable animated circle to indicate statuses, notifications, or activity with smooth motion animations.

14 built-in animationsMultiple sizes and tonesFully customizable
Basic
Status
Features

Status Indication

Perfect for online, away, or busy statuses.

Notification Dot

Use it to alert users about new messages or updates.

Activity Pulse

Indicate ongoing processes or live activity.

Attention Grabber

Subtle animations to draw user focus naturally.

Installation
Works with npm, pnpm, yarn, and bun

$npx libravelui@latest add animated-circle-indicator

Anatomy
import { AnimatedCircleIndicator } from "@/components/ui/motion/animated-circle-indicator";<AnimatedCircleIndicatorsize="md"tone="primary"animation="pulseTransparent"/>
User Statuses
Notification Badge
Task Activity
Props

Loading types…

Edit on GitHub

Typewriting Text

An animated typing effect component for displaying text with a smooth, typewriter-like motion.

Animated Dock

An interactive, Apple-style dock with smooth motion physics and dynamic icon scaling. Responsive, intuitive, and built for precision.

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI ™

Starter Kits

Templates

    Coming Soon

Labs