CSS

CSS Animation Loading Spinners

Create 10 unique loading spinners using keyframe animations and transform properties.

CSSAnimationKeyframesUI
Thumbnail for CSS Animation Loading Spinners

Overview

Create 10 unique loading spinners using keyframe animations and transform properties.

HTML Structure

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS Animation Loading Spinners</title>
    <link rel="stylesheet" href="styles.css" />
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>CSS Animation Loading Spinners</h1>
        </header>
        <main class="content">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title">Example Component</h2>
                    <p class="card-text">Demonstrating modern CSS techniques.</p>
                </div>
            </div>
        </main>
    </div>
</body>
</html>

Core Styles

css
/* Custom Properties */
:root {
    --color-primary: #6366f1;
    --color-secondary: #8b5cf6;
    --color-surface: #ffffff;
    --color-text: #1e293b;
    --radius: 12px;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

/* Card Component */
.card {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

/* Responsive Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --color-surface: #1e293b;
        --color-text: #f8fafc;
    }
}

Advanced Techniques

css
/* Animated gradient border */
.gradient-border {
    position: relative;
    padding: 3px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

.gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    filter: blur(12px);
    opacity: 0;
    transition: opacity var(--transition);
    z-index: -1;
}

.gradient-border:hover::before {
    opacity: 0.6;
}

/* Scroll-driven animation */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-on-scroll {
    animation: fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
}

Browser Support

- Modern Evergreen browsers - CSS custom properties: 95%+ support - Container queries: 90%+ support - \@layer\ cascade layers: 93%+ support

Tags

- CSS - Animation - Keyframes - UI

Related Projects

Screenshot of CSS Responsive Email Template project
CSSNov 19, 2024

CSS Responsive Email Template

Build a cross-client email template with table layouts, inline styles, and media queries.

CSSEmailResponsiveTemplate
Read more → Source
Screenshot of CSS Clip-Path Shape Morphing project
CSSNov 15, 2024

CSS Clip-Path Shape Morphing

Create animated shape transitions using clip-path polygons and CSS transitions.

CSSClip-PathShapesAnimation
Read more → Source
Screenshot of CSS Gradient Pattern Backgrounds project
CSSNov 11, 2024

CSS Gradient Pattern Backgrounds

Generate repeating geometric patterns using CSS gradients without any image files.

CSSGradientsPatternsBackgrounds
Read more → Source

Comments (0)

Leave a Comment

No comments yet. Be the first to comment!