Photo by Irvan Smith on Unsplash

Pre-Loader Design Using HTML and CSS

Create a modern, responsive pre-loader using HTML and CSS, featuring a set of bouncing dots with smooth animations, ideal for indicating loading states on web pages. This static implementation focuses on clean design, accessibility, and maintainable code structure. JavaScript can be added to toggle visibility dynamically.

Prerequisites

• Basic HTML and CSS knowledge
• A code editor (e.g., VS Code)

Part 1: Pre-Loader Design

Step 1: HTML Structure (index.html)

Create a semantic HTML structure for the pre-loader with a container and three dot elements.

<div class="preloader-container" role="alert" aria-live="polite" aria-label="Loading">
    <div class="preloader">
        <div class="preloader-dot"></div>
        <div class="preloader-dot"></div>
        <div class="preloader-dot"></div>
    </div>
</div>

Step 2: Core CSS Implementation (styles.css)

Style the pre-loader with smooth bouncing animations and responsive design.

:root {
    --gray-900: #111827;
    --gray-700: #374151;
    --gray-200: #e5e7eb;
    --gray-100: #f3f4f6;
    --white: #ffffff;
    --primary-600: #2563eb;
    --primary-500: #3b82f6;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --transition: 0.2s ease;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.preloader-container {
    position: relative;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.preloader {
    display: flex;
    gap: var(--spacing-xs);
}

.preloader-dot {
    width: 16px;
    height: 16px;
    background: var(--primary-500);
    border-radius: 50%;
    animation: bounce 0.6s ease infinite alternate;
}

.preloader-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.preloader-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-20px);
        opacity: 0.5;
    }
}

@media (max-width: 640px) {
    .preloader-container {
        width: 80px;
        height: 80px;
    }

    .preloader-dot {
        width: 12px;
        height: 12px;
    }

    @keyframes bounce {
        0% {
            transform: translateY(0);
            opacity: 1;
        }
        100% {
            transform: translateY(-15px);
            opacity: 0.5;
        }
    }
}

Explanation

• Layout: A container centers a flexbox row of three dots, styled as circles with border-radius: 50%.
• Animations: Each dot uses a bounce keyframe animation to move upward and fade, with staggered delays (0s, 0.2s, 0.4s) for a wave effect.
• Styling: Dots are colored with --primary-500 and placed in a white container with a subtle shadow and rounded corners.
• Responsiveness: A media query (@media (max-width: 640px)) reduces the container and dot sizes, adjusting the bounce distance for mobile.
• Accessibility: role="alert", aria-live="polite", and aria-label="Loading" ensure screen readers announce the loading state.

UX Tip: Ensure the pre-loader is visually distinct and non-intrusive. Use ARIA attributes to communicate the loading state to screen readers. Add JavaScript in production to show/hide the loader based on page load or async operations.

Accessibility Features

• Use role="alert" and aria-live="polite" for semantic structure
• Ensure high contrast ratios for loader elements (4.5:1 minimum)
• Provide aria-label to describe the loading state

Golden Rules

• Use CSS variables for consistent theming
• Implement smooth animations for better UX
• Ensure accessibility with ARIA attributes
• Optimize for mobile with responsive design

Conclusion

A professional pre-loader should maintain visual clarity, provide smooth animations, remain responsive, and follow accessibility guidelines. This solution uses HTML and CSS for a polished bouncing dot loader, ideal for indicating loading states. Experiment with dot sizes, colors, or animation timing to match your design. Add JavaScript to toggle visibility dynamically. Test across devices and browsers for usability. Feel free to leave comments with any questions or suggestions!