👉 Home 👉 Web Projects
You will see this loading animation on many famous websites like YouTube, Facebook. This makes loading attractive. If you also want to give a new fresh look to the boring loading of your web page then definitely learn this.
👉 Table of Contents
Step-1: Markup for the project (HTML)
<div id="base">
<div class="thumbnail skeleton"></div>
<div class="group">
<div class="logo skeleton"></div>
<div class="content">
<div class="skeleton"></div>
<div class="skeleton"></div>
</div>
</div>
</div>
This code is written in HTML and represents a basic webpage structure. Inside a container with the id "base," there are several nested elements. There's a thumbnail element with a class "skeleton" meant to display a placeholder image. Inside a group, there's a logo element with the class "skeleton" for a placeholder logo, and a content section with two more "skeleton" elements, possibly placeholders for text or images. These "skeleton" elements are likely used for creating a loading or placeholder effect on a webpage, giving users the impression that content is loading before the actual content appears.
Step-2: Basic CSS rules
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
}
This code is for styling a webpage using CSS. The first part, `*`, selects all elements on the webpage and sets their margins to 0, padding to 0, and box-sizing to border-box. This ensures that there is no extra spacing around elements and that their sizes are calculated including borders.
The second part, `body`, targets the entire webpage's body. It sets the body's height to take up 100% of the viewport height (vh), making it fill the whole screen vertically. It also sets the width to 100% to make sure it spans the entire width of the viewport. Finally, it uses flexbox to center the content horizontally within the body, so everything on the page will be centered.
👉 See More:
Step-3: CSS rule for #base
#base{
position: relative;
top: 20vh;
height: 280px;
width: 250px;
background-color: rgba(128,128,128,0.6);
display: flex;
align-items: center;
flex-direction: column;
}
This code defines a basic style for a webpage element called "base." It specifies that this element should have a relative position, meaning it will be positioned relative to its normal position on the webpage. It also sets the element's distance from the top of the viewport to be 20% of the viewport's height (vh). The element will have a fixed height of 280 pixels and a width of 250 pixels. Its background color will be a semi-transparent gray, and its contents will be centered both vertically and horizontally within the element. Finally, the contents inside this element will be arranged in a column layout, which means they will stack on top of each other.
Output:
|
| output @step-3 |
Step-4: CSS rule for thumbnail
.thumbnail{
height: 150px;
width: 200px;
background-color: gray;
overflow: hidden;
margin: 1.5em 0;
}
This code is used to style an HTML element with the class "thumbnail." It sets the height of the element to 150 pixels and the width to 200 pixels, making it a fixed size. It also gives the element a gray background color. The "overflow: hidden;" property means that if the content inside the element is larger than the specified dimensions, it will be clipped or hidden. Finally, it adds a margin of 1.5em (which is a unit of measurement in HTML/CSS) at the top and bottom, creating some spacing around the "thumbnail" element when it's displayed on a webpage. Essentially, this code defines the visual appearance of a thumbnail container that might be used to display images or other content in a structured way on a webpage.
Output:
 |
| output @step-4 |
Step-5: CSS rule for logo
.logo{
height: 50px;
width: 50px;
background-color: gray;
border-radius: 50%;
position: relative;
overflow: hidden;
}
This code is used to style an HTML element with the class "logo." It sets the height and width of the element to 50 pixels, making it a square. The background color of the element is set to gray, giving it a gray color. The "border-radius" property is used to make the element a circle by rounding its corners to 50%, effectively removing the square edges. It also uses "position: relative" to control the positioning of the element within its parent container, and "overflow: hidden" to ensure that anything outside the circular shape is hidden from view. In simple terms, this code styles a circular logo element that is 50 pixels in height and width, with a gray background color.
Output:
 |
| output @step-5 |
👉 See More:
Step-6: CSS rule for position of logo
.group{
display: flex;
align-items: center;
justify-content: space-between;
width: 200px;
}
This code is for styling a group of elements in a webpage using CSS. It creates a class called ".group" that applies certain styles to elements with this class. The "display: flex;" property makes the elements inside the group behave like a flexible container, allowing them to align horizontally. "align-items: center;" centers the elements vertically within the container, and "justify-content: space-between;" puts space between the elements horizontally, pushing them to the far left and right edges of the container. Finally, "width: 200px;" sets the width of the container to 200 pixels. So, any HTML elements with the class ".group" will be arranged horizontally with space between them, centered vertically, and have a width of 200 pixels.
Output:
 |
| output @step-6 |
Step-7: CSS rules for title & description
.content{
height: 100%;
width: 140px;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow: hidden;
}
.content div{
height: 15px;
width: 100%;
background-color: gray;
overflow: hidden;
}
.content div:nth-child(2){
width: 80% !important;
}
This code is for styling a webpage using CSS. It defines how elements with the class "content" and their child elements should look. The "content" elements will be as tall as their parent, 140 pixels wide, and arranged in a vertical column with space around them. They won't show content that goes beyond their size. The child "div" elements inside "content" will be 15 pixels tall, 100% wide, and have a gray background color. The second child "div" will be wider (80% of its parent's width) with the "!important" rule, which means this style should be applied even if other styles conflict.
Output:
 |
| output @step-7 |
Step-8: CSS rule for loading shadow
.skeleton::before{
content: "";
display: block;
height: 100%;
width: 0px;
background-color: gray;
box-shadow: 0 0 40px 10px #555;
animation: slide 1.2s linear forwards infinite;
}
This code uses a CSS pseudo-element (::before) to create a visual effect. It starts by setting an empty content before the content of an element with the class "skeleton". The element is given a block display, meaning it will appear as a rectangular block on the webpage. The block has a height of 100% of its parent element and initially has no width (0px). It is colored gray and has a shadow effect around it. The animation property is applied, named "slide", and it takes 1.2 seconds to complete linearly (meaning at a constant speed). The animation runs infinitely, creating a continuous sliding effect where the gray block expands horizontally with a shadow, giving the illusion of movement on the webpage.
Output:
 |
| output @step-8 |
👉 See More:
Step-9: Keyframes for loading shadow
@keyframes slide {
to{
transform: translateX(300px);
}
}
This code defines a CSS animation called "slide." An animation is a way to make elements on a webpage move or change over time. In this animation, the element will gradually move to the right by 300 pixels (px). The `@keyframes` rule is used to specify the animation's behavior over time. In this case, it says that from the starting point to the ending point, the element will slide or translate to the right by 300 pixels. So, if you apply this animation to an element in your webpage, that element will smoothly slide to the right when the animation is triggered.
Final Output:
FAQs
what is !important in css?
In CSS, !important is a declaration that can be added to a style rule to give it higher specificity, making it override other conflicting styles. When a style rule is marked with !important, it takes precedence over regular styles, even if they have higher specificity or appear later in the stylesheet.
what is animation property in css?
In CSS, the animation property is used to apply animations to elements. It allows you to specify various animation-related properties, such as the name of the animation, its duration, timing function, delay, and iteration count. This property is a shorthand for several individual animation-related properties, making it more convenient to apply animations to elements in a concise way.
what is @keyframes in css?
In CSS (Cascading Style Sheets), @keyframes is a rule that allows you to create animations by gradually changing from one set of CSS styles to another. Keyframes define the stages and styles of an animation, specifying how a CSS property should evolve over the duration of the animation.
Comments
Post a Comment