Simple Loader v7 || Loading Animation || HTML + CSS only || Web Experiments




Step 1: Markup (HTML):-


<body>
  <div class="base">
    <div class="bar one"></div>
    <div class="bar two"></div>
    <div class="bar three"></div>
    <div class="bar four"></div>
    <div class="bar five"></div>
    <div class="bar six"></div>
    <div class="bar seven"></div>
    <div class="bar eight"></div>
    <div class="text">Loading</div>
  </div>
</body>

This code represents a simple HTML web page structure. Inside the `<body>` element, there is a `<div>` element with the class name "base." Inside this "base" div, there are several other `<div>` elements, each with a unique class name like "bar one," "bar two," and so on. These inner divs likely represent different elements on a web page, possibly for creating a loading animation. Lastly, there is a `<div>` with the class name "text" that contains the text "Loading." This code essentially defines a basic webpage layout with some elements that can be styled and manipulated using CSS and JavaScript to create a loading animation or other visual effects.


Step 2: Set some initial css rules in <style> tag:-


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

This code is for styling elements on a webpage using CSS. It applies some basic styles to all elements, including any pseudo-elements like ::before and ::after. The styles being applied are setting the padding to zero (no extra space inside elements), margin to zero (no space around elements), and using "box-sizing: border-box" which means the element's total width and height will include padding and borders, not just the content inside. Essentially, this code helps create a consistent starting point for styling all elements on the webpage, ensuring they behave in a predictable way with no extra spacing or surprises.


Step 3: Style <body> tag:-


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

This code is used to style a webpage's body element, which is like the background of the webpage. It sets the height of the body to be the full height of the viewport (the part of the webpage you can see on your screen). It also makes the content inside the body (like text or images) to be centered both vertically and horizontally on the page. So, no matter the size of the screen, the content inside the body will always be in the middle of the screen. This code is often used for creating centered layouts in web design.


Step 4: Create a base for loader:-


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

This code defines a CSS class called ".base." This class is used to style HTML elements on a web page. It sets the height and width of these elements to be 250 pixels each, making them square-shaped. It also uses flexbox layout, which means it arranges the content inside these elements both vertically and horizontally centered. Additionally, it sets the position of these elements to be "relative," which means they can be positioned in relation to their normal position on the page. This code is a basic starting point for styling elements, like containers or buttons, to be centered and have a specific size on a web page.


Step 5: Style all bars at once:-


.bar{
  background-color: black;
  height: 50px;
  width: 20px;
  border-radius: 10px;
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(50% + var(--y));
  transform: rotateZ(var(--deg));
  opacity: 0;
  animation-name: fade;
  animation-duration: 800ms;
  animation-delay: var(--delay);
  animation-iteration-count: infinite;
animation-timing-function: linear;
}

This code is describing how to style a "bar" element in a web page using CSS. The ".bar" class is being defined with several properties. It sets the background color to black and gives the bar a height of 50 pixels and a width of 20 pixels. It also rounds the corners of the bar with a border-radius of 10 pixels. The "position: absolute;" makes sure the bar is positioned relative to its nearest positioned ancestor. The "left" and "top" properties position the bar at the center of its container by using some calculated values. The "transform" property allows you to rotate the bar by a certain degree, which is specified as a variable. The bar starts with zero opacity and is animated using the "fade" animation, which lasts for 800 milliseconds and can repeat infinitely with a linear timing function. This code provides styling and animation instructions for a black bar element.


Step 6: set position values, delay time and angles of bars individually.


.one{
  --x : -10px;
  --y : -120px;
  --delay : 0ms;
}
.two{
  --x : 50px;
  --y : -90px;
  --delay : 100ms;
  --deg : 45deg;
}
.three{
  --x : 80px;
  --deg : 90deg;
  --delay : 200ms;
}
.four{
  --x : 50px;
  --y : 40px;
  --delay : 300ms;
  --deg : -45deg;
}
.five{
  --x : -10px;
  --y : 70px;
  --delay : 400ms;
}
.six{
  --x : -70px;
  --y : 40px;
  --delay : 500ms;
  --deg : 45deg;
}
.seven{
  --x : -100px;
  --delay : 600ms;
  --deg : 90deg;
}
.eight{
  --x : -70px;
  --y : -90px;
  --delay : 700ms;
  --deg : -45deg;
}

This code appears to define some CSS styles for HTML elements with different class names (one, two, three, etc.). Each class has a set of custom CSS variables (prefixed with "--") that specify properties like the element's position (x and y coordinates), animation delay, and rotation degree. These variables can be used later in the CSS code to apply specific styling to elements with these class names. It seems like this code is intended for creating animations or transformations for different elements on a web page, allowing them to move, rotate, and appear at different times based on their class.

Step 7: Style Text:-


.text{
  font-family: cursive;
}

This code is telling a web page how to display text. It says that the text should use a font called "cursive." In simple terms, this means that the letters will have a more flowing and decorative style, kind of like handwriting. So, if you have some text on a web page and you apply this code to it, that text will appear in a cursive font style instead of the default font. It's a way to make text look more interesting or decorative on a webpage.


Step 8: Set Keyframes:-


@keyframes fade{
  from{
    opacity: 1;
  }
  to{
    opacity: 0;
  }
}

This code defines a keyframe animation called "fade." Keyframes are used in CSS animations to specify how an element should change over time. In this "fade" animation, it starts with full opacity (opacity: 1) at the "from" keyframe and gradually decreases to completely transparent (opacity: 0) at the "to" keyframe. Essentially, it makes an element gradually disappear from view as the animation plays. This animation can be applied to HTML elements to create a fading effect, like fading out an image or text smoothly.


---END---

Comments

Post a Comment