Animations can make a website stand out by providing interactive and visually appealing elements. In this blog, we’ll walk you through how to create a unique Microsoft-themed loading animation using HTML, CSS, and JavaScript. This loading animation uses Microsoft’s classic four-color logo design, where each section of the logo lights up in a looped sequence.
This project focuses on clean and responsive design, making it adaptable for any modern web page.
Overview of the Animation
This animation is inspired by the iconic Microsoft logo, which is divided into four boxes, each representing a different color. The colors of the boxes change dynamically using JavaScript’s Promise function and setTimeout to achieve a seamless loading effect. In addition, the developer’s name is displayed at the bottom of the screen with an animated shadow.
HTML Structure
We’ll start by breaking down the HTML structure, which is simple and easy to follow. We create a container for the four boxes that make up the Microsoft logo and an <h2> tag for the "MICROSOFT" label.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Microsoft Loading Animation</title>
</head>
<body>
<!-- Microsoft logo container -->
<div class="box">
<div class="child-box" id="box1"></div>
<div class="child-box" id="box2"></div>
<div class="child-box" id="box3"></div>
<div class="child-box" id="box4"></div>
</div>
<!-- Microsoft text below the logo -->
<h2>MICROSOFT</h2>
<!-- JavaScript for animating the boxes -->
<script src="script.js"></script>
</body>
</html>
HTML Explanation:
boxdiv: This is the main container that holds four smaller boxes (child-box), each representing a section of the Microsoft logo.h2: This element displays the text "MICROSOFT" below the logo.- JavaScript link: The
<script>tag points to the external JavaScript file responsible for controlling the animation.
CSS for Styling
The CSS code is used to style the four boxes to resemble Microsoft’s logo. We also add styles for the body, headings, and a custom animation for the color changes.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
color: white;
}
body {
min-height: 100vh;
background: #333;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h3 {
color: rgba(255, 255, 255, 0.6);
text-shadow: 4px 4px 2px deeppink, -3px -3px 2px deepskyblue;
position: absolute;
bottom: 10%;
z-index: 5;
font-size: 3vh;
}
h2 {
margin-top: 10%;
text-shadow: 2px 2px 2rem white;
}
.box {
height: 20vh;
width: 20vh;
display: flex;
flex-wrap: wrap;
}
/* Individual boxes representing the Microsoft logo */
.child-box {
height: 50%;
width: 50%;
background: white;
border: 1px solid #111;
}
.child-box:nth-child(1) {
background: orangered;
}
.child-box:nth-child(2) {
background: lightseagreen;
}
.child-box:nth-child(3) {
background: royalblue;
}
.child-box:nth-child(4) {
background: yellow;
}
@keyframes clrload {
to {
background: #444;
}
}
CSS Explanation:
- Global Styles: Basic resets are applied to remove margin and padding from all elements. The text color is set to white.
- Body: The body of the page is styled using
flexboxto center the content both vertically and horizontally. child-boxStyles: These boxes represent the four quadrants of the Microsoft logo, each with a unique background color. The boxes are evenly distributed usingflex-wrap.- Animation Keyframes: The
clrloadanimation creates a smooth color transition for the boxes, giving the loading effect.
JavaScript for Dynamic Animation
The animation logic is controlled using JavaScript. Here’s how it works:
'use strict'
console.log('Welcome to the script created by @Developer Manoj');
let box1 = document.querySelector("#box1");
let box2 = document.querySelector("#box2");
let box3 = document.querySelector("#box4");
let box4 = document.querySelector("#box3");
let box = [box1, box2, box3, box4];
let boxNum = 0;
let changeclr = 'clrload 2s infinite';
let devtext = document.createElement("h3");
let webdev = document.createTextNode("@Developer Manoj");
devtext.appendChild(webdev);
document.body.appendChild(devtext);
function changenow() {
const changemove = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("OK");
box[boxNum].style.animation = changeclr;
box[3].style.animation = "none";
boxNum++;
}, 1000);
});
changemove.then((data) => {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve("ok");
box[boxNum - 1].style.animation = "none";
nowtime(boxNum);
boxNum++;
}, 1000);
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve("OK");
box[boxNum - 1].style.animation = "none";
nowtime(boxNum);
boxNum++;
}, 1000);
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(function() {
resolve("OK");
box[boxNum - 1].style.animation = "none";
box[3].style.animation = changeclr;
boxNum = 0;
setTimeout(changenow(), 1000);
}, 1000);
});
});
});
});
}
function nowtime(number) {
box[number].style.animation = changeclr;
}
changenow();
JavaScript Explanation:
- Box Selection: The four boxes are selected using their IDs (
#box1,#box2, etc.), and stored in an array (box) for easy access during the animation. - Promise-based Animation: A
Promiseis used to handle the asynchronous color changes. The boxes change color one by one, creating a looping effect where the color of each box transitions using theclrloadanimation.
This Microsoft-themed loading animation is a creative way to add some visual flair to your website’s loading process. With a combination of HTML for structure, CSS for styling, and JavaScript for dynamic animation, you can easily incorporate this effect into your projects.
The code is fully customizable, so feel free to tweak the colors, timings, or animation styles to fit your design needs!
0 comments:
Post a Comment