Creating a Dynamic Loading Animation Inspired by the MI Logo ~ WebDev

Loading animations are a vital part of modern web design. They provide visual feedback to users during loading times, enhancing the overall user experience. In this blog post, we'll walk you through creating a unique loading animation inspired by the iconic MI logo using HTML and CSS. This animation incorporates a sleek logo animation combined with a series of blinking dots, offering a polished and modern look.

Overview of the Animation

The loading animation consists of two main parts:

The MI-inspired logo: This element is creatively designed with borders and shapes to mimic the MI logo. It has a subtle sliding effect to create an elegant transition.
Blinking dots: These dots continuously pulse in and out, giving a sense of motion and loading activity. The pulsating dots are designed using CSS animations to scale and change color, creating a smooth, dynamic effect.

HTML Structure

Let’s start with the basic structure in HTML. We’ll use semantic tags and simple divs to organize our content.


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MI Loading Animation</title>
    <link rel="stylesheet" href="style.css"> <!-- Link to the CSS file -->
</head>

<body>
    <div class="logobox">
        <div class="m-element"></div>
    </div>

     <div class="box">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>

    <h3 class="devtext">@Developer Manoj</h3>

</body>
</html>

HTML Explanation

MI-inspired logo: The logobox div houses the custom-designed logo, built using CSS shapes.
Blinking dots: The box div contains three dot divs that are animated to blink continuously.

CSS for Styling and Animation

Here’s where the magic happens! The following CSS styles bring the logo and the blinking dots to life.


* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    color: white;
}

body {
    display: flex;
    background: black;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.devtext {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
    position: absolute;
    bottom: 5%;
}

.box {
    height: 20px;
    width: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    bottom: 10%;
}

.dot {
    height: 33%;
    aspect-ratio: 1/1;
    background: silver;
    border-radius: 50%;
    animation: blinkshow 1s infinite linear;
}

.dot:nth-child(1) {
    animation-delay: 0.1s;
}
.dot:nth-child(2) {
    animation-delay: 0.2s;
}
.dot:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes blinkshow {
    100% {
        background: white;
        transform: scale(1.3);
        box-shadow: 2px 2px 20px #fff;
    }
}

.logobox {
    background: white;
    height: 60px;
    aspect-ratio: 1/1;
    border-radius: 36%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.logobox:after {
    content: "";
    width: 4px;
    background: transparent;
    height: 200%;
    box-shadow: 2px 2px 12px silver;
    transform: rotateZ(20deg);
    animation: logoslide 4s infinite linear;
    position: absolute;
    left: 0px;
    transition: 2s all ease-in-out;
}

@keyframes logoslide {
    to {
        left: 100%;
    }
}

.m-element {
    height: 30%;
    width: 40%;
    border: 5px solid black;
    border-bottom: none;
    display: flex;
    border-top-right-radius: 30%;
    justify-content: center; 
    align-items: center;
    position: relative;
    transform: translateX(-30%);
}

.m-element:before {
    content: "";
    position: absolute;
    height: 80%;
    border-left: 5px solid black;
}

.m-element:after {
    content: "";
    position: absolute;
    height: 140%;
    border-left: 5px solid black;
    right: -100%;
    top: 38%;
    transform: translate(50%, -50%);
}

CSS Explanation

Global Styles:

We apply a reset for padding and margin across all elements and set the default text color to white.
The body is styled using flexbox to center the elements both vertically and horizontally.

Logo (logobox):

The logobox creates the circular background for the MI logo.
A pseudo-element (::after) adds a sliding effect over the logo, which moves across the logo from left to right using the logoslide animation.

The "M" Element:

The "M" shape is created using the m-element class and two ::before and ::after pseudo-elements for the vertical bars. These elements position the borders of the "M" shape and are aligned perfectly using CSS transforms.

Blinking Dots (dot):

Each dot represents a circle, created with an aspect ratio of 1:1 and a silver background.
The blinkshow animation enlarges the dot, changes its color to white, and applies a shadow for a glowing effect. Each dot is given a different animation delay to create a sequence.

Bringing It All Together

This code creates a sophisticated loading animation that mimics the MI logo with a sliding effect, and the blinking dots add an extra layer of visual appeal. You can use this type of animation on any website to keep users engaged during loading times, particularly if you're designing for a tech or gadget-related project

Loading animations not only improve user experience but also add a layer of professionalism to your website. This MI-inspired loading animation is a perfect blend of creativity and functionality. It's built entirely with HTML and CSS, making it efficient and easy to integrate into any project.

Feel free to experiment with the colors, animation speeds, and dot patterns to make the animation your own!

WebDev

Saturday, September 28, 2024