Creating an Animated Cat Loader Using HTML and CSS

Are you ready to add a playful touch to your web development journey? Today, as part of my #100DaysOfCode Challenge, I'm excited to share with you a step-by-step guide on creating an animated cat loader. This fun project will not only enhance your coding skills but also bring a smile to your users' faces. Let's dive in!

Step 1: Getting Started

First, download the full source code from this link. Make sure you have a code editor installed and ready to roll.

Step 2: Setting Up the HTML Structure

Open your HTML file and set up the basic structure. Don't forget to link your CSS file.

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta tags for character set and viewport -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Linking to external stylesheet -->
    <link rel="stylesheet" href="style.css">
    <title>Animated Cat Loader</title>
</head>

<body>
    <!-- Container for the animated cat loader -->
    <div class="cat">
        <!-- Segments of the cat loader -->

    </div>
</body>

</html>

Step 3: Styling the Cat Loader

Now, let's move on to the CSS file and start styling our cat loader. We'll create the animations, set the dimensions, and add some cute gradients.

/* CSS to style the entire document */
/* Resetting default styles */
* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Styling for the body */
body {
    /* Setting background color */
    background: #2c4763;
    /* Setting display to flex for layout */
    display: flex;
    /* Responsive font size */
    font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
    /* Full viewport height */
    height: 100vh;
    /* Setting line height */
    line-height: 1.5;
}

/* Styling for the animated cat loader */
.cat {
    /* Centering the loader horizontally and vertically */
    margin: auto;
    /* Setting position to relative for absolute positioning */
    position: relative;
    /* Setting width */
    width: 16em;
    /* Setting height */
    height: 16em;
}

/* Styling for each segment of the cat loader */
.cat__segment {
    /* Positioning each segment absolutely */
    position: absolute;
    /* Aligning segments vertically */
    top: 50%;
    /* Aligning segments horizontally */
    left: 50%;
    /* Setting width */
    width: 3em;
    /* Setting height */
    height: 2em;
    /* Centering each segment */
    transform: translate(-50%, -50%);
}

/* Styling for the pseudo-element of each segment */
.cat__segment:before {
    /* Animation for segment appearance */
    animation: loop 2s cubic-bezier(0.6, 0, 0.4, 1) infinite running;
    /* Background gradient */
    background: linear-gradient(90deg, white 20%, #e6e6e6 20% 80%, white 80%);
    /* Border radius */
    border-radius: 0.25em;
    /* Empty content */
    content: "";
    /* Display as block element */
    display: block;
    /* Optimizing for animation */
    will-change: transform;
    /* Full width */
    width: 100%;
    /* Full height */
    height: 100%;
}

/* Styling for the first segment */
.cat__segment:first-of-type {
    /* Setting width */
    width: 4em;
    /* Setting height */
    height: 4em;
    /* Setting stacking order */
    z-index: 1;
}

/* Styling for the first segment's pseudo-element */
.cat__segment:first-of-type:before {
    /* Custom background gradients */
    background: radial-gradient(0.25em 0.25em at 1.25em 1.6em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.75em 0.75em at 1.25em 1.75em, #1a1a1a 48%, rgba(26, 26, 26, 0) 50%), radial-gradient(0.25em 0.25em at 2.75em 1.6em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.75em 0.75em at 2.75em 1.75em, #1a1a1a 48%, rgba(26, 26, 26, 0) 50%), radial-gradient(0.9em 0.8em at 1.5em 2.65em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(0.9em 0.8em at 2.5em 2.65em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 0.8em at 1.6em 2.75em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 0.8em at 2.4em 2.75em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(0.75em 0.75em at 50% 2.5em, #e69999 48%, rgba(230, 153, 153, 0) 50%), radial-gradient(4em 3em at 50% 2em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(4em 3em at 50% 2.2em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 3em at 0.75em 1.5em, #e69999 39%, white 40% 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 3em at 3.25em 1.5em, #e69999 39%, white 40% 49%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 0.5em 2.8em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 0.5em 3em, #cccccc 48%, rgba(204, 204, 204, 0) 50%), radial-gradient(1em 2em at 3.5em 2.8em, white 48%, rgba(255, 255, 255, 0) 50%), radial-gradient(1em 2em at 3.5em 3em, #cccccc 48%, rgba(204, 204, 204, 0) 50%);
    /* Preventing background repeat */
    background-repeat: no-repeat;
}

.cat__segment:last-of-type {
    width: 3em;
    height: 4em;
}

.cat__segment:last-of-type:before {
    background: linear-gradient(90deg, white 20%, #e6e6e6 20% 80%, white 80%) 0 1.5em/3em 0.5em, radial-gradient(3em 2em at top center, #e6e6e6 30%, white 31% 48%, rgba(255, 255, 255, 0) 50%) 0 2em/3em 2em, radial-gradient(1em 4em at 0.5em 0, white 48%, rgba(255, 255, 255, 0) 50%) 0 2em/3em 2em, radial-gradient(1em 4em at 2.5em 0, white 48%, rgba(255, 255, 255, 0) 50%) 0 2em/3em 2em;
    background-repeat: no-repeat;
}

.cat__segment:nth-of-type(1) {
    transform: translate(-50%, -50%) rotate(-20deg);
}

.cat__segment:nth-of-type(1):before {
    animation-delay: 0s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(2) {
    transform: translate(-50%, -50%) rotate(-18.6666666667deg);
}

.cat__segment:nth-of-type(2):before {
    animation-delay: 0.02s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(3) {
    transform: translate(-50%, -50%) rotate(-17.3333333333deg);
}

.cat__segment:nth-of-type(3):before {
    animation-delay: 0.04s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(4) {
    transform: translate(-50%, -50%) rotate(-16deg);
}

.cat__segment:nth-of-type(4):before {
    animation-delay: 0.06s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(5) {
    transform: translate(-50%, -50%) rotate(-14.6666666667deg);
}

.cat__segment:nth-of-type(5):before {
    animation-delay: 0.08s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(6) {
    transform: translate(-50%, -50%) rotate(-13.3333333333deg);
}

.cat__segment:nth-of-type(6):before {
    animation-delay: 0.1s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(7) {
    transform: translate(-50%, -50%) rotate(-12deg);
}

.cat__segment:nth-of-type(7):before {
    animation-delay: 0.12s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(8) {
    transform: translate(-50%, -50%) rotate(-10.6666666667deg);
}

.cat__segment:nth-of-type(8):before {
    animation-delay: 0.14s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(9) {
    transform: translate(-50%, -50%) rotate(-9.3333333333deg);
}

.cat__segment:nth-of-type(9):before {
    animation-delay: 0.16s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(10) {
    transform: translate(-50%, -50%) rotate(-8deg);
}

.cat__segment:nth-of-type(10):before {
    animation-delay: 0.18s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(11) {
    transform: translate(-50%, -50%) rotate(-6.6666666667deg);
}

.cat__segment:nth-of-type(11):before {
    animation-delay: 0.2s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(12) {
    transform: translate(-50%, -50%) rotate(-5.3333333333deg);
}

.cat__segment:nth-of-type(12):before {
    animation-delay: 0.22s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(13) {
    transform: translate(-50%, -50%) rotate(-4deg);
}

.cat__segment:nth-of-type(13):before {
    animation-delay: 0.24s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(14) {
    transform: translate(-50%, -50%) rotate(-2.6666666667deg);
}

.cat__segment:nth-of-type(14):before {
    animation-delay: 0.26s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(15) {
    transform: translate(-50%, -50%) rotate(-1.3333333333deg);
}

.cat__segment:nth-of-type(15):before {
    animation-delay: 0.28s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(16) {
    transform: translate(-50%, -50%) rotate(0deg);
}

.cat__segment:nth-of-type(16):before {
    animation-delay: 0.3s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(17) {
    transform: translate(-50%, -50%) rotate(1.3333333333deg);
}

.cat__segment:nth-of-type(17):before {
    animation-delay: 0.32s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(18) {
    transform: translate(-50%, -50%) rotate(2.6666666667deg);
}

.cat__segment:nth-of-type(18):before {
    animation-delay: 0.34s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(19) {
    transform: translate(-50%, -50%) rotate(4deg);
}

.cat__segment:nth-of-type(19):before {
    animation-delay: 0.36s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(20) {
    transform: translate(-50%, -50%) rotate(5.3333333333deg);
}

.cat__segment:nth-of-type(20):before {
    animation-delay: 0.38s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(21) {
    transform: translate(-50%, -50%) rotate(6.6666666667deg);
}

.cat__segment:nth-of-type(21):before {
    animation-delay: 0.4s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(22) {
    transform: translate(-50%, -50%) rotate(8deg);
}

.cat__segment:nth-of-type(22):before {
    animation-delay: 0.42s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(23) {
    transform: translate(-50%, -50%) rotate(9.3333333333deg);
}

.cat__segment:nth-of-type(23):before {
    animation-delay: 0.44s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(24) {
    transform: translate(-50%, -50%) rotate(10.6666666667deg);
}

.cat__segment:nth-of-type(24):before {
    animation-delay: 0.46s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(25) {
    transform: translate(-50%, -50%) rotate(12deg);
}

.cat__segment:nth-of-type(25):before {
    animation-delay: 0.48s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(26) {
    transform: translate(-50%, -50%) rotate(13.3333333333deg);
}

.cat__segment:nth-of-type(26):before {
    animation-delay: 0.5s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(27) {
    transform: translate(-50%, -50%) rotate(14.6666666667deg);
}

.cat__segment:nth-of-type(27):before {
    animation-delay: 0.52s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(28) {
    transform: translate(-50%, -50%) rotate(16deg);
}

.cat__segment:nth-of-type(28):before {
    animation-delay: 0.54s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(29) {
    transform: translate(-50%, -50%) rotate(17.3333333333deg);
}

.cat__segment:nth-of-type(29):before {
    animation-delay: 0.56s;
    transform: translateX(6em);
}

.cat__segment:nth-of-type(30) {
    transform: translate(-50%, -50%) rotate(18.6666666667deg);
}

.cat__segment:nth-of-type(30):before {
    animation-delay: 0.58s;
    transform: translateX(6em);
}

/* Animation keyframes */
@keyframes loop {
    from {
        /* Starting position */
        transform: rotate(0) translateX(6em);
    }

    to {
        /* Ending position */
        transform: rotate(-1turn) translateX(6em);
    }
}

Step 4: Adding the Cat Segments

Back in our HTML file, let's add the individual segments of our cat loader.

<!-- Inside the .cat div -->
<div class="cat">
        <!-- Segments of the cat loader -->
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
        <div class="cat__segment"></div>
</div>

Step 5: Final Touches

Now that everything is in place, open your HTML file in a browser and behold your adorable animated cat loader!

Conclusion

Congratulations on completing Day 13 of the #100DaysOfCode Challenge! You've not only learned how to create an animated cat loader but also had fun in the process. Keep coding, stay curious, and don't forget to share your creations with the world!

If you have any questions or want to connect, feel free to reach out to me on my Bento page. Happy coding! 🐱🚀

Creating an Animated Cat Loader Using HTML and CSS || FREE Source Code