Simple Loader v9 || Loading Animation || Web Designing





Step 1: Markup (HTML):-

<div class="base">
  <div class="orange oone"></div>
  <div class="orange otwo"></div>
  <div class="green gone"></div>
  <div class="green gtwo"></div>
  <div class="red rone"></div>
  <div class="red rtwo"></div>
</div>

This code represents a piece of HTML markup for a webpage. Inside a container with the class "base," there are six different div elements, each with its own class. The classes "orange," "green," and "red" seem to represent different colors, while "oone," "otwo," "gone," "gtwo," "rone," and "rtwo" might be used to distinguish individual elements within each color group. These classes can be used in CSS styles or JavaScript to apply specific formatting or functionality to these elements on the webpage. Essentially, it sets up a structure for displaying content or creating interactive elements with different colors and categories.


Step 2: Set an initial CSS rule in <style> tag that removes all default settings:-

*, *::after, *::before{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

This code is setting some basic styles for all elements on a webpage. The asterisk (*) means it applies to everything, including all HTML elements. It's saying that for every element, including its pseudo-elements (::before and ::after), there should be no padding or margin around it, and the "box-sizing" property should be set to "border-box." The "box-sizing: border-box" means that when you specify the width and height of an element, it includes the padding and border within those dimensions, so the total size of the element is consistent. This code helps ensure a more consistent and predictable layout for web elements.


Step 3: Style body tag that sets the contents at center:-

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

This code is for styling a web page using CSS. It sets the height of the webpage's body to be equal to the full height of the viewport (100vh). It then uses a flexbox layout by setting the display property to "flex". This allows the content within the body to be centered both vertically and horizontally. The "align-items: center;" rule centers the content vertically, and "justify-content: center;" centers it horizontally. So, this code essentially centers the content of the webpage both vertically and horizontally on the screen.


Step 4: Create a base for loader of 200 x 200 px:-

.base{
  height: 200px;
  width: 200px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

This code is defining a CSS style for an HTML element with the class "base." It sets the height and width of this element to be 200 pixels each, making it a square shape. The "position: relative;" means that this element will be positioned relative to its normal position on the web page. The "display: flex;" property is used to create a flexible container, and "align-items: center;" and "justify-content: center;" are used to center the content (or other elements) inside this "base" element both vertically and horizontally. So, if you apply this style to an HTML element with the class "base," it will become a centered square with a size of 200x200 pixels.


Step 5: Style base colors:-

.orange, .green, .red{
  height: 50px;
  width: 100px;
  position: absolute;
}

This code is written in a programming language called CSS, which is used to style web pages. It defines styles for three different elements on a web page, which are selected by their class names: ".orange", ".green", and ".red". Each of these elements is given a fixed height of 50 pixels and a fixed width of 100 pixels, making them a specific size. They are also set to be positioned absolutely, which means they will be placed at a specific location on the web page relative to the top-left corner of their nearest positioned ancestor element. So, these styles will make elements with the class ".orange", ".green", or ".red" appear as fixed-size boxes that can be positioned anywhere on the web page.


Step 6:  Style both orange semi circles named ".oone" & ".otwo":-

.otwo{
  background-color: orange;
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  top: calc(50% - 50px);
  z-index: 1;
}
.oone{
  border-top-right-radius: 200px;
  border-top-left-radius: 200px;
  position: absolute;
  top: calc(50% - 50px);
  background-color: orange;
  transform-origin: 50px 50px;
  animation:
  rotateOrange 3s linear infinite;
}

This code defines two CSS classes, ".otwo" and ".oone," that are used to style HTML elements. Elements with the ".otwo" class will have an orange background color, rounded corners at the top right and left, be vertically centered on the page, and have a higher stacking order (z-index) compared to other elements. Elements with the ".oone" class will also have rounded corners at the top right and left, be absolutely positioned on the page, centered vertically, have an orange background color, and undergo a rotation animation called "rotateOrange" that lasts for 3 seconds and repeats infinitely, with the rotation anchored at the point (50px, 50px) within the element. These CSS styles are applied to HTML elements to control their appearance and behavior on a webpage.


Step 7: Set keyframes for orange semi-circle:-

@keyframes rotateOrange{
  0%{
    background-color: red;
    transform: rotateX(0deg);
    z-index: 2;
  }
  20%{
    background-color: orange;
    transform: rotateX(180deg);
    z-index: 2;
  }
  40%{
    background-color: orange;
    transform: rotateX(180deg);
    z-index: 2;
  }
  41%{
    background-color: green;
    transform: rotateX(180deg);
    z-index: 6;
  }
  60%{
    background-color: blue;
    transform: rotateX(0deg);
    z-index: 9;
  }
  61%{
    z-index: 6;
  }
  100%{
    background-color: blue;
    transform: rotateX(0deg);
    z-index: 6;
  }
}

This code defines a set of animations for an HTML element using a keyframes rule called "rotateOrange." This animation gradually changes the background color, rotation angle, and z-index of the element over time. 
At the beginning (0%), the element has a red background color, no rotation, and a z-index of 2. As the animation progresses, it transitions to an orange background color and rotates 180 degrees (20% and 40%). At 41%, it turns green with the same rotation. Then, it changes to blue (60%) and resets its rotation to 0 degrees. The z-index also changes at specific points to control the element's stacking order. Finally, at 100%, it remains blue with no rotation and a z-index of 6.
In simple terms, this code creates an animation that makes an HTML element change its colors and flip like a card, while also controlling how it appears in front of or behind other elements on the webpage.


Step 8: Style both green semi-circles named ".gone" & ".gtwo":-

.gone{
  background-color: green;
  height: 100px;
  width: 50px;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  left: 50%;
  transform: rotateY(180deg);
  animation:
  rotateGreenTwo 3s linear infinite;
 }

This code is for styling a web page element with a class called "gone." It sets the background color of the element to green and gives it a specific height and width, making it 100 pixels tall and 50 pixels wide. The code also rounds the top-left and bottom-left corners of the element using a circular shape with a radius of 200 pixels. It positions the element in the middle of its container horizontally (at 50% from the left) and rotates it 180 degrees around the Y-axis, effectively flipping it horizontally. Additionally, it applies a CSS animation called "rotateGreenTwo" to the element, which lasts for 3 seconds, has a linear timing function, and repeats infinitely, creating a continuous rotation effect.


.gtwo{
  background-color: green;
  height: 100px;
  width: 50px;
  border-top-right-radius: 200px;
  border-bottom-right-radius: 200px;
  transform: rotateY(-180deg);
  position: absolute;
  left: calc(50% - 0px);
  transform-origin: 0px 50px;
  animation:
  rotateGreen 3s linear infinite;
 }

This code defines a CSS class called ".gtwo" that styles an HTML element. It sets the background color to green and specifies the element's height and width. It also gives the element rounded corners on its top-right and bottom-right corners, creating a circular shape. The "transform" property rotates the element 180 degrees around its vertical axis (making it appear upside-down). It's positioned absolutely on the web page, centered horizontally using the "calc" function, and the rotation point is set to the left edge of the element's container. Finally, there's an animation called "rotateGreen" applied to it, which makes the element continuously rotate for 3 seconds in a linear manner, creating a spinning effect.


Step 9: Set keyframes for both green semi-circles:-

@keyframes rotateGreen {
  0%{
    z-index: 0;
    background-color: orange;
    transform: rotateY(0deg);
  }
  20%{
    z-index: 0;
    background-color: orange;
    transform: rotateY(0deg);
  }
  21%{
    z-index: 3;
    background-color: orange;
    transform: rotateY(0deg);
  }
  40%{
    z-index: 3;
    background-color: green;
    transform: rotateY(180deg);
  }
  60%{
    z-index: 3;
    background-color: green;
    transform: rotateY(180deg);
  }
  61%{
    z-index: 8;
    background-color: blue;
    transform: rotateY(180deg);
  }
  80%{
    z-index: 8;
    background-color: red;
    transform: rotateY(0deg);
  }
  100%{
    z-index: 8;
    background-color: red;
    transform: rotateY(0deg);
  }
 }

This code defines a CSS animation called "rotateGreen" using the "@keyframes" rule. This animation will be applied to an HTML element to change its appearance over time. The animation consists of several keyframes (defined by percentages), each specifying different styles for the element at different points in time during the animation. 
At 0% and 20% of the animation, the element has a background color of orange and no rotation. At 21%, it still has an orange background but changes its z-index (a property related to the stacking order of elements) to 3. Between 40% and 60%, the background color changes to green, and the element rotates 180 degrees around the Y-axis. At 61%, the z-index increases to 8, and the background color becomes blue. Finally, from 80% to 100%, the background color turns red, and the rotation resets to 0 degrees. 
So, when this animation is applied to an element in a webpage, it will smoothly transition between these styles, creating a visual effect of changing colors and rotations.

@keyframes rotateGreenTwo{
  20%{
    z-index: 0;
  }
  21%{
    z-index: 2;
  }
  100%{
    z-index: 2;
  }
 }

This code is defining a set of instructions for a web animation. It's called "rotateGreenTwo" and it specifies what should happen at different points in time during the animation. 
In simple terms, it says that at the 20% mark of the animation, an element should have a "z-index" property set to 0. Then, at the 21% mark and beyond, it should have a "z-index" of 2. The animation lasts until 100%, so after the 21% point, the "z-index" remains at 2 until the animation is complete.
The "z-index" property is often used in web design to control the stacking order of elements on a webpage. So, this code is essentially saying that an element should start at the bottom of the stacking order, and then move up to the top (z-index 2) during this animation.


Step 10: Style both red semi-circles named ".rone" & ".rtwo":-

.rone{
  background-color: red;
  height: 50px;
  width: 100px;
  border-bottom-right-radius: 200px;
  border-bottom-left-radius: 200px;
  position: absolute;
  top: 50%;
  z-index: 0;
  animation:
  rotateRed 3s linear infinite;
 }

This code is defining the style for an HTML element with the class name "rone." It specifies that this element should have a red background color, be 50 pixels in height and 100 pixels in width. It also gives the element rounded corners at the bottom-right and bottom-left using border-radius properties. The element is positioned absolutely on the web page, with its top positioned at 50% from the top of its container. It has a z-index of 0, which determines its stacking order on the page. Lastly, it applies a CSS animation called "rotateRed" that lasts for 3 seconds, runs linearly, and repeats infinitely, creating a rotating effect for this element.

.rtwo{
  background-color: red;
  height: 100px;
  width: 50px;
  border-top-left-radius: 200px;
  border-bottom-left-radius: 200px;
  left: calc(50% - 50px);
  animation:
  rotateRedTwo 3s linear infinite;
 }

This code is defining the style for an HTML element with the class "rtwo." It's saying that this element should have a red background color, be 100 pixels tall and 50 pixels wide, and have rounded corners on the top-left and bottom-left corners with a circular radius of 200 pixels. The "left" property is used to position the element horizontally, making it centered on the webpage. Additionally, there's an animation called "rotateRedTwo" applied to this element. This animation will make the element continuously rotate for 3 seconds in a linear manner, giving it an animated effect. So, in simple terms, this code is creating a red box that spins around its own center on a web page.


Step 11: Set keyframes for both red semi-circles:-

@keyframes rotateRed {
  0%{
    background-color: red;
  }
  40%{
    background-color: red;
    z-index: 0;
  }
  41%{
    background-color: blue;
    z-index: 5;
  }
  60%{
    background-color: blue;
    z-index: 5;
  }
  100%{
    background-color: blue;
    z-index: 5;
  }
 }

This code defines a set of animations for an HTML element using CSS. It's called "rotateRed." It specifies how the background color and z-index of the element should change over time. When the animation starts at 0%, the background color is red. As time progresses, the background color remains red until it reaches 40%, at which point the z-index property is set to 0. Then, between 41% and 60% of the animation, the background color changes to blue, and the z-index is set to 5, which means the element will appear on top of other elements on the web page. Finally, from 60% to 100% of the animation, both the background color and z-index remain constant at blue and 5, respectively. This code creates a smooth transition from red to blue while adjusting the element's stacking order on the webpage.

@keyframes rotateRedTwo {
  60%{
    z-index: 0;
  }
  61%{
    z-index: 8;
  }
  100%{
    z-index: 8;
  }
 }

This code is defining a CSS animation called "rotateRedTwo" that is used to change the "z-index" property of an element over a period of time. "z-index" is used to control the stacking order of elements on a webpage. In this animation, during the first 60% of its duration, the element will have a "z-index" of 0, meaning it will be placed behind other elements. Then, at the 61% mark, the "z-index" changes to 8, which means it will be brought to the front and displayed on top of other elements. Finally, from 61% to 100% of the animation, the "z-index" remains at 8, ensuring that the element stays on top until the animation ends. This code is often used in web development to create visual effects like element transitions and transformations.


---END---

Comments

Post a Comment