CSS Animation Examples | Cute Pink Hamster CSS Loader

Last Updated: 2025-09-02 14:13:25

Enhance your website’s loading experience with this cute pink hamster running in a wheel CSS loader. The loader features smooth animations for the hamster’s head, limbs, tail, and blinking eye, creating a lively and realistic running effect. The spinning wheel adds a dynamic touch, making it engaging for users. Lightweight and fully CSS-based, it does not require JavaScript, making integration quick and easy. You can download the complete source code to use in your projects.

How does this CSS Animation work

◈ Body Styling – The body uses Flexbox to center the loader both vertically and horizontally. A dark background (#111) makes the pink hamster and wheel stand out beautifully.

◈ Hamster Container – The .hamster-runner div holds the entire loader. With position: relative, it allows child elements like the wheel and hamster parts to be positioned precisely.

◈ Wheel – The .wheel is a circular element with radial gradients to simulate a hamster wheel. Its rotation creates the illusion of continuous running.

◈ Hamster Head – The .hamster-head rotates slightly back and forth using keyframes. This motion mimics a natural head movement while the hamster runs.

◈ Hamster Ear – The .hamster-ear is a small circular element on the head. It rotates gently in sync with the head animation, adding realism to the hamster’s movement.

◈ Hamster Eye – The .hamster-eye blinks using a vertical scale animation. This subtle detail brings life and personality to the hamster.

◈ Hamster Nose – The .hamster-nose is a tiny pink element on the face. Though small, it completes the hamster’s cute look.

◈ Hamster Body – The .hamster-body rocks slightly using keyframe animation. This makes the torso movement look natural and coordinates with limb motions.

◈ Hamster Limbs – The front and back limbs rotate alternately with keyframes to simulate a running motion. Their movement is synchronized with the body and wheel for realistic animation.

◈ Hamster Tail & Wheel Spokes – The .hamster-tail wags in sync with the body, and .spoke rotates continuously. Together, they make the loader lively and dynamic.

/* Body Styling */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #111;
}

/* Hamster Container */
.hamster-runner {
    --dur: 1s;
    position: relative;
    width: 12em;
    height: 12em;
}

/* Wheel */
.wheel {
    border-radius: 50%;
    inset: 0;
    background: radial-gradient(100% 100% at center,
        hsla(0,0%,60%,0) 47.8%, hsl(0,0%,60%) 48%);
    z-index: 2;
}

/* Hamster Body */
.hamster {
    animation: hamster var(--dur) ease-in-out infinite;
    top: 50%;
    left: calc(50% - 3.5em);
    width: 7em;
    height: 3.75em;
    transform: rotate(4deg) translate(-0.8em,1.85em);
    transform-origin: 50% 0;
    z-index: 1;
}

/* Hamster Head */
.hamster-head {
    animation: hamsterHead var(--dur) ease-in-out infinite;
    background: hsl(330,90%,75%);
    border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
}

/* Hamster Body */
.hamster-body {
    animation: hamsterBody var(--dur) ease-in-out infinite;
    background: hsl(330,90%,90%);
    border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
}

/* Hamster Limbs */
.hamster-limb--fr, .hamster-limb--fl, .hamster-limb--br, .hamster-limb--bl {
    animation: limbAnimation var(--dur) linear infinite;
}

/* Hamster Tail and Wheel Spokes */
.hamster-tail {
    animation: hamsterTail var(--dur) linear infinite;
    background: hsl(330,90%,85%);
}

.spoke {
    animation: spoke var(--dur) linear infinite;
    background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,transparent 5%),
        linear-gradient(transparent 46.9%,hsl(0,0%,65%) 47% 52.9%,transparent 53%) 50% 50%/99% 99% no-repeat;
}

/* Animations */
@keyframes hamster { 
    0%,100% { transform: rotate(4deg) translate(-0.8em,1.85em); } 
    50% { transform: rotate(0) translate(-0.8em,1.85em); } 
}

@keyframes hamsterHead { 
    0%,25%,50%,75%,100% { transform: rotate(0); } 
    12.5%,37.5%,62.5%,87.5% { transform: rotate(8deg); } 
}

@keyframes hamsterBody { 
    0%,25%,50%,75%,100% { transform: rotate(0); } 
    12.5%,37.5%,62.5%,87.5% { transform: rotate(-2deg); } 
}

@keyframes hamsterTail { 
    0%,25%,50%,75%,100% { transform: rotate(30deg); } 
    12.5%,37.5%,62.5%,87.5% { transform: rotate(10deg); } 
}

@keyframes spoke { 
    to { transform: rotate(-1turn); } 
}

You can download the complete source code to use in your projects.

The cute pink hamster running in a wheel CSS loader is a lightweight, fully CSS-based animation that enhances user experience during page loads. Its synchronized movements of the hamster’s limbs, head, tail, and spinning wheel make it visually appealing and lively. Easy to implement and customize, this loader is perfect for beginners exploring css loader examples or developers looking for simple css animation examples for their projects.