In this blog, we have an HTML document that includes a link to a CSS file call “style.css”. The document also includes a “loading” div element within the body.
In the CSS file, we first use some properties for the body element. We set the display property to “flex” to align the content within the body. We also set the justify-content property to “center” and the align-items property to “center” to center the content both horizontally and vertically. The min-height property is use to “100vh” so that the body element takes up the full height of the viewport. The background color is use to a shade of green and the perspective property is use to “200px”. The overflow property is use to “hidden” to hide any content that overflows the body element.
Next, we have a class called “loading” which is applie to the div element in the HTML. This class sets the width and height of the div to “100px” and “100px” respectively and sets the background color to white and the border-radius to “10px”. The animation property is use to “loading 2s linear infinite” which applies the “loading” animation to the div and makes it run indefinitely.
The loading animation is define using the @keyframes rule. It has three keyframes, 0%, 50% and 100%. First 0% keyframe, the transform property is use to rotateX(0deg) rotateY(0deg) which means the div is not rotate in any direction. Second 50% keyframe, the transform property is use to rotateX(0deg) rotateY(180deg) which means the div rotates 180 degrees around the Y-axis. Third 100% keyframe, the transform property is use to rotateX(180deg) rotateY(180deg) which means the div rotates 180 degrees around both the X and Y axis. This creates the effect of the loading div spinning around.
Video Tutorial of Quick Loading Effect
To see a live demonstration of the Random Color Palette Generator, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
You might like this:
Quick Loading Effect
HTML:
Create a new file with the name “index.html” and add the provide code to it. Ensure the file has a “.html” extension.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Quick Loading Effect</title>
</head>
<body>
<div class="loading"></div>
</body>
</html>
The <body> element in HTML is one of the most important parts of a webpage, as it contains all of the content that is displayed to the user. In this code snippet, we can see that the <body> element contains only one child element, a <div> with a class of “loading”.
The <div> element is commonly used to create a container for HTML elements, and in this case, it is being used to create a container for the loading animation. The class “loading” is defined in a separate CSS file and is used to apply styles to this specific <div> element.
It’s also worth noting that the <body> element does not contain any inline styles or attributes, which is a best practice for separating the presentation of a webpage from its structure and content. Instead, the styles for the <body> element are defined in the linked “style.css” file, which allows for easy modification and maintenance of the webpage’s layout and appearance.
In summary, this code snippet shows a basic example of a webpage that uses a separate CSS file to apply styles to the <body> element and it’s child element, the <div> with class “loading”. The body contains only one child element which is the div element with class “loading” that is going to be use for loading animation.
CSS:
Create a new CSS file name “style.css” and copy the provide code into it. Ensure that the file has a “.css” extension.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #26de81;
perspective: 200px;
overflow: hidden;
}
.loading {
width: 100px;
height: 100px;
background: #fff;
border-radius: 10px;
animation: loading 2s linear infinite;
}
@keyframes loading {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(0deg) rotateY(180deg);
}
100% {
transform: rotateX(180deg) rotateY(180deg);
}
}
The CSS code provided is used to style the <body> element and its child element, the <div> with class “loading”.
The body element has several properties set on it:
display: flex: This property sets the layout of child elements within thebodyto be displayed in a flexbox layout. This allows for easy alignment and positioning of child elements.justify-content: center: This property aligns child elements along the horizontal axis, in this case, it centers the child elements.align-items: center: This property aligns child elements along the vertical axis, in this case, it centers the child elements.min-height: 100vh: This property sets the minimum height of thebodyelement to be the full height of the viewport (100vh).perspective: 200px: This property sets the perspective from which child elements within thebodyare viewed. It is use for 3D effect.
The .loading class is applied to the child <div> element. It has several properties set on it:
width: 100px: This property sets the width of the.loadingelement to100px.height: 100px: This property sets the height of the.loadingelement to100px.animation: loading 2s linear infinite: This property sets an animation named “loading” to run on the.loadingelement. The animation runs for 2 seconds, with a linear timing function, and it runs indefinitely (infinite).
The @keyframes loading sets the keyframes of the animation,
- 0% { transform: rotateX(0deg) rotateY(0deg); }
- 50% { transform: rotateX(0deg) rotateY(180deg); }
- 100% { transform: rotateX(180deg) rotateY(180deg); }
This CSS code creates a loading animation effect on the <div> element with class “loading”. The animation is defined using the @keyframes rule, which sets the animation’s keyframes and the state of the element at each keyframe. Overall, the CSS code sets styles on the <body> and .loading elements to center and animate the loading effect.
Summary:
This code creates a webpage with a “Quick Loading Effect” title. The webpage has a background color of #26de81 and has a loading animation in the center of the page. The animation is a white box with a border radius of 10px that rotates on the X and Y axis for 2 seconds in a linear and infinite loop. The animation is achieve using the “loading” class and the “@keyframes loading” code. The webpage also has a link to a “style.css” file for additional styling.
