Animated Bar Loader

Built with React, TypeScript, CSS Modules, CSS Animations

Overview

This animated bar loader component provides smooth, performant loading indicators for different application states. Originally built with Stitches CSS-in-JS, it’s been converted to CSS Modules for better maintainability and performance.

The component features two distinct animation modes: a pulsing effect for indeterminate loading and a sweeping progress animation for route transitions, both with comprehensive accessibility support.

Key Features

• Multiple States: Loading (pulse) and routing (sweep) animations
• Smooth Animations: CSS-based animations using cubic-bezier easing
• Accessibility Compliant: ARIA labels, progress bar semantics, reduced motion support
• Performance Optimized: CSS Modules with scoped styles and will-change optimization
• Responsive Design: Adapts to different container sizes
• Interactive Demo: Live controls to switch between states

Implementation Details

The loader uses pure CSS animations for optimal performance:

Animation System:

• Pulse Animation: growAndShrink keyframe with scale and opacity transforms
• Sweep Animation: sweepAcross keyframe with translateX for progress indication
• Easing Functions: Custom cubic-bezier curves for natural motion
• Performance: will-change property for GPU acceleration

CSS Modules Migration:

• Converted from Stitches variants to CSS Module classes
• Maintained all original animation timings and easing
• Added proper CSS custom property integration
• Improved bundle size by removing runtime CSS-in-JS

Accessibility Features:

• Proper role="progressbar" semantics
• Dynamic ARIA labels based on state
• aria-valuenow for determinate progress
• prefers-reduced-motion media query support
• Live region announcements for state changes

What I Learned

• CSS-in-JS Migration: Converting Stitches variants to CSS Modules while preserving functionality
• Animation Performance: Using transform-based animations for 60fps performance
• Accessibility Patterns: Implementing proper progress bar semantics and reduced motion
• State Management: Coordinating visual states with ARIA attributes for screen readers
• CSS Custom Properties: Leveraging CSS variables for consistent theming
• Keyframe Optimization: Creating smooth, natural animations with proper easing curves
• Bundle Optimization: Reducing JavaScript bundle size by moving styles to CSS