Product Strategy
Feedback
Progress indicators and notification systems for communicating task status, system feedback, and user alerts.
Progress Bar Components
Linear progress indicators showing completion percentage for tasks, uploads, downloads, and long-running operations.
Basic Progress Bar
Progress Bar Sizes
Progress Bar Variants
Striped & Animated Progress Bars
Indeterminate Progress (Loading State)
Use when operation duration is unknown
Gradient Progress Bar
Buffered Progress Bar
For streaming media or downloads with buffer ahead of playback
Progress Bar with Icon
Stacked Progress Bars (Multi-Segment)
Show multiple values that sum to 100%
Compact Progress Bar
For dense layouts and inline contexts
Interactive Demos
Manual Progress Control
Simulated File Upload
Loading State Toggle
Progress Bars in Context
Project Alpha
ActiveDesign and development phase in progress
Storage Usage
80% Full8 GB of 10 GB used
Team Goals
CompletedAll quarterly objectives achieved
Notification Center Component
Centralized message inbox for user notifications, alerts, and system messages with filtering and management capabilities.
Notification Center Trigger
Click the bell icon to open the notification center panel
Programmatic Control
Add notifications and manage notification center via JavaScript API
Add Sample Notifications
Notification Center Controls
Notification Features
Supported Features
- Notification Types - Info, Success, Warning, Danger with semantic colors
- Filtering - View all, unread only, or read notifications
- Date Grouping - Automatic grouping by Today, Yesterday, This Week, or specific dates
- Mark as Read - Click notification to mark as read, or mark all read at once
- Dismissal - Individual dismiss buttons for each notification
- Unread Badge - Visual indicator showing count of unread messages
- Categories - Optional category labels for notification organization
- Actions - Custom action buttons within notifications
- Responsive - Full-width panel on mobile, sidebar on desktop
- Keyboard Support - Escape key closes the panel
JavaScript API
NotificationCenter API
JavaScript
// Add notification
VanillaUI.NotificationCenter.addNotification({
title: 'Task Complete',
message: 'Your export has finished',
type: 'success',
category: 'Exports'
});
// Control panel
VanillaUI.NotificationCenter.open();
VanillaUI.NotificationCenter.close();
VanillaUI.NotificationCenter.toggle();
// Manage notifications
VanillaUI.NotificationCenter.markAsRead(notificationId);
VanillaUI.NotificationCenter.markAllAsRead();
VanillaUI.NotificationCenter.dismiss(notificationId);
VanillaUI.NotificationCenter.clearAll();
// Get state
const count = VanillaUI.NotificationCenter.getUnreadCount();
const notifications = VanillaUI.NotificationCenter.getNotifications();Real-World Integration Example
Notification center integrated into application header with live updates
Simulated Workflow
Click buttons to trigger events that generate notifications:
Open the notification center (bell icon) to see the messages generated by these actions.
Alerts & Toast Notifications
Inline alert components and toast notifications for contextual feedback, information, and system messages.
Alert Variants
Success!
Warning
Error
Information
Alerts with Actions
Your trial is expiring soon
New update available
Compact Alerts
Toast Notifications
Toast notifications appear in the top-right corner and auto-dismiss after 5 seconds.
Advanced feedback and utility components including loading overlays, error boundaries, feature flags management, and social sharing.
Loading Overlay Component
Page-level and section-level loading indicators with spinners, progress bars, and customizable messages.
Page-Level Loading Overlay
Covers the entire page with a loading indicator
Section-Level Loading Overlay
Loading indicator scoped to a specific section or card
Content Section
This is a sample content section that can show a loading overlay.
Simulated Upload with Progress
File Upload Simulation
Demonstrates a realistic file upload scenario with progress tracking.
JavaScript API
LoadingOverlay API
JavaScript
// Show page-level loading
const id = VanillaUI.LoadingOverlay.show({
title: 'Loading',
message: 'Please wait...',
size: 'md' // 'sm', 'md', 'lg'
});
// Show with progress bar
const id = VanillaUI.LoadingOverlay.showWithProgress({
title: 'Processing',
message: 'Uploading files...',
progress: 0
});
// Update progress
VanillaUI.LoadingOverlay.updateProgress(id, 50, 'Half way there...');
// Show section loading
const id = VanillaUI.LoadingOverlay.showSection('#my-section', 'Loading data...');
// Hide overlay
VanillaUI.LoadingOverlay.hide(id);
// Simulate progress
VanillaUI.LoadingOverlay.simulateProgress({
duration: 3000,
title: 'Processing',
onComplete: () => console.log('Done!')
});Error Boundary Component
Graceful error handling UI with recovery options, error details, and user-friendly messaging.
Full-Screen Error Boundary
Page-level error display with actions and collapsible details
Inline Error Boundary
Card-style error display for failed content sections
Content Section
This section can display an error state.
Error Alert Banner
Dismissible error alerts for contextual messages
Async Error Handling
Automatic Error Boundary for Async Operations
Wrap async functions to automatically catch and display errors.
JavaScript API
ErrorBoundary API
JavaScript
// Show full-screen error
VanillaUI.ErrorBoundary.showFullScreen({
title: 'An Error Occurred',
message: 'Something went wrong. Please try again.',
details: errorStack, // Stack trace or error details
code: 'ERR_500',
icon: 'error', // 'error', 'warning', 'info'
actions: [
{ label: 'Reload Page', variant: 'primary', action: () => location.reload() },
{ label: 'Go Home', variant: 'secondary', action: () => location.href = '/' }
]
});
// Show inline error
VanillaUI.ErrorBoundary.showInline('#container', {
title: 'Failed to Load',
message: 'Unable to fetch data',
actions: [
{ label: 'Retry', variant: 'primary', action: retryFunction }
]
});
// Show error alert
VanillaUI.ErrorBoundary.showAlert({
title: 'Error',
message: 'Operation failed',
dismissible: true,
actions: [{ label: 'Retry', action: retryFunction }]
});
// Wrap async functions
const safeFunction = VanillaUI.ErrorBoundary.wrapAsync(
async () => { /* ... */ },
{ title: 'Operation Failed' }
);
// Set custom global error handler
VanillaUI.ErrorBoundary.setGlobalErrorHandler((error) => {
// Custom error handling logic
});