Circular Progress Indicator
SVG ring progress indicators with an animated fill, count-up percentage, glow colors and a slider-driven demo ring with color thresholds.
Feedback & Overlays
Dialogs, notifications and loading states.
21 component(s)
Pure CSS Tooltips
JavaScript-free tooltips driven by data attributes, with top, right, bottom and left placement, arrows, color tones and hover or focus triggers.
Native dialog Modal
Accessible modal built on the native HTML dialog element with @starting-style enter and exit animation, blurred backdrop, mobile bottom sheet and an invite form.
Cookie Preferences Modal
Bootstrap 5 cookie consent banner with a preferences modal: category switches, collapsible cookie tables, accept, reject and save actions, stored safely in localStorage.
No Search Results
Bootstrap 5 empty search state with a spelling-aware "Did you mean" suggestion, removable filter chips, search tips, popular searches and a support link.
Animated Progress Bars
Bootstrap 5 dark dashboard with labelled bars that fill on scroll, a striped animated build progress bar and a stacked storage bar.
Offcanvas Shopping Cart
Bootstrap 5 offcanvas cart drawer with quantity steppers, remove buttons, free-shipping progress, live totals and an empty state.
Popover with Rich Content
Bootstrap 5 popovers with HTML content: profile card with buttons, inline help with links and a delete confirmation, with focus handling.
Dismissible Alerts with Icons
Bootstrap 5 dismissible alerts with icons, headings, per-alert close buttons, dismiss all, restore and screen reader announcements.
Bootstrap Toast Stack
Bootstrap 5 toast notifications in a corner stack: success, info, warning and error buttons, selectable corner, auto-hide with a progress bar and a stack limit.
Login Modal
Bootstrap 5 login modal with social sign-in buttons, floating labels, a show/hide password toggle, client-side validation and a signed-in success view.
Delete Confirmation Modal
Dark Bootstrap 5 modal that confirms deleting an item by typing its exact name, with per-row triggers, a loading state and removal of the deleted row.
Slide-Over Panel
Tailwind CSS slide-over drawer from the right with header, scrollable form content, sticky footer actions, focus trap and Escape to close.
Alerts Collection
Tailwind CSS alerts collection with success, warning, error and info variants, icons, action links and accessible dismiss buttons.
Toast Notifications
Stacking Tailwind CSS toast notifications for success, error and info with auto-dismiss countdown, pause on hover and accessible live region.
Cookie Consent Banner
Tailwind CSS cookie consent banner with accept, reject and a settings dialog with category switches, saved to localStorage with a consent event.
Empty State with Illustration
Tailwind CSS empty state with an animated inline SVG illustration, clear headline, primary and secondary call-to-action buttons and template shortcuts.
Skeleton Card Loader
Tailwind CSS skeleton loaders for an article card grid and a list, with pulse or shimmer animation that swaps to real content once loaded.
Full-Page Loader
Tailwind CSS full-page loader overlay with a spinning gradient ring, progress bar and status messages that fades out once the page has loaded.
CSS Spinner Collection
Eight lightweight pure CSS loading spinners in a labelled grid, each with role="status" and screen reader text, no JavaScript.
Modal Dialog
Accessible Tailwind CSS modal dialog with focus trap, Escape and backdrop close, scroll lock and a type-to-confirm delete action.