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




Step 1. Markup (HTML):-


<body>
  <div class="base">
    <div class="dot one"></div>
    <div class="dot two"></div>
    <div class="dot three"></div>
    <div class="dot four"></div>
  </div>
</body>

This HTML code represents a web page structure. Inside the `<body>` element, there is a container `<div>` with the class name "base." Inside this container, there are four smaller `<div>` elements, each with a different class name ("dot one," "dot two," "dot three," and "dot four"). These smaller `<div>` elements are like dots or elements that can be styled or manipulated using CSS or JavaScript. You can think of this code as setting up a basic structure for a webpage with a container and some smaller elements inside it, which can be used to create various visual designs or interactions on the web page.


Step 2. Set up some initial CSS rule in <style>:-


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

This code is used to style web page elements using CSS. It selects all elements (denoted by the asterisk "*"), including their before and after pseudo-elements. It sets three CSS properties for these elements: "padding" is set to 0, which means there is no space inside the element; "margin" is also set to 0, removing any space outside the element; and "box-sizing" is set to "border-box," which means that the element's total width and height include its padding and border, not just its content. This code is often used as a reset or normalization to ensure consistent styling across different web browsers.


Step 3. Style <body>:-


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

This code is used in a webpage to style the "body" element, which typically represents the entire visible area of the webpage. It sets the height of the body to take up 100% of the vertical height of the user's screen (100vh). This ensures that the entire screen is filled with the content. It also uses flexbox layout properties to center the content both vertically and horizontally within the body element. So, any content placed inside the body will be centered both vertically and horizontally on the webpage, making it visually pleasing and easy to read.


Step 4. Create a base for loader :-


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

This code defines a CSS (Cascading Style Sheets) class called ".base." This class is used to style HTML elements on a web page. It sets the height and width of the element to 200 pixels, making it a square. It also uses the "display: flex;" property to turn the element into a flexible container, which can arrange its contents horizontally or vertically. The "align-items: center;" and "justify-content: center;" properties are used to center the contents both vertically and horizontally within the container. Lastly, the "position: relative;" property is applied, which allows for further positioning of child elements within this container. Essentially, this CSS class is making it easy to create a centered and flexible square container for web page elements.


Step 5. Style all dots at once :-

.dot{
  height: 50px;
  width: 50px;
  background-color: grey;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
  left: calc(50% + var(--x));
  top: calc(50% + var(--y));
}

This code defines a CSS class called ".dot" that is used to style elements in a web page. The elements with this class will have a square shape with a height and width of 50 pixels. They will be colored grey and have rounded corners, giving them a circular appearance. The "opacity" property is set to 1, which means they will be fully visible. These elements will be positioned absolutely on the web page, allowing you to place them precisely. The "left" and "top" properties use the "calc" function to position the element at the center of its container plus an offset specified by "--x" and "--y" custom properties, which can be adjusted to move the element around as needed.


Step 6. Set position, translate value and animation properties for dot one:-


.one{
  --x : -90px;
  --y : -90px;
  --tx : 130px;
  animation: slide14 4s ease-in-out forwards infinite;
}

This code is defining a CSS class called "one." Inside this class, there are some custom properties being set using the `--x`, `--y`, and `--tx` variables. These variables specify values for positioning elements on a webpage. The class also has an animation called "slide14" applied to it. This animation lasts for 4 seconds, uses an easing-in-out timing function for smooth movement, and continues indefinitely (infinite). The "forwards" keyword ensures that the final animation state is retained after it finishes. So, any element with the "one" class will continuously move according to the "slide14" animation, and the custom properties (--x, --y, --tx) may be used within the animation to control specific visual effects.


Step 7. Set position, translate value and animation properties for dot two:-


.two{
  --x : 40px;
  --y : -90px;
  --tx : -130px;
  --ty : 130px;
  opacity: 0;
  animation: slide23 4s ease-in-out forwards infinite;
}

This code defines a CSS class called ".two". Inside this class, there are some custom properties (variables) defined using "--x", "--y", "--tx", and "--ty" with specific values in pixels. It also sets the "opacity" property to 0, making the element invisible. The interesting part is the "animation" property, which applies an animation called "slide23" to the element. This animation lasts for 4 seconds, uses easing in and out for smoother movement, and continues indefinitely with the "infinite" keyword. This animation likely controls the element's position and opacity over time, creating a sliding or fading effect on the web page.


Step 8. Set position, translate value and animation properties for dot three:-


.three{
  --x : -90px;
  --y : 40px;
  --tx : 130px;
  --ty : -130px;
  opacity: 0;
  animation: slide23 4s ease-in-out forwards infinite;
}

This code defines a CSS class called ".three" and sets some custom properties using variables (--x, --y, --tx, --ty) to specify positioning values. It also sets the initial opacity of the element to 0, making it invisible. Then, it applies an animation called "slide23" that lasts for 4 seconds, using an easing-in-out timing function, and it continues indefinitely. During this animation, the element will move according to the values specified by the custom properties, and its opacity will change to make it visible. This code is essentially creating a sliding animation effect for an HTML element with the class ".three" that will repeat indefinitely.



Step 9. Set position, translate value and animation properties for dot four:-


.four{
  --x : 40px;
  --y : 40px;
  --tx : -130px;
  animation: slide14 4s ease-in-out forwards infinite;
}

This code defines a CSS class called ".four." Inside this class, there are some custom variables (--x, --y, and --tx) set with specific values in pixels. Then, it specifies an animation called "slide14" to be applied. This animation lasts for 4 seconds and has a smooth easing effect in and out. The "forwards" keyword means that the final state of the animation is retained after it completes. Finally, "infinite" means the animation will repeat endlessly. So, when you apply this class to an HTML element, it will continuously animate by sliding with the defined values and timing.


Step 10. Set keyframes for dot one and four:-


@keyframes slide14{
  25%{
    transform: translateX(var(--tx));
    opacity: 0;
  }
  50%{
    transform: translateX(var(--tx)) translateY(var(--tx));
    opacity: 1;
  }
  75%{
    transform: translateX(0px) translateY(var(--tx));
    opacity: 0;
  }
  100%{
    transform: translateX(0px) translateY(0px);
    opacity: 1;
  }
}

This code defines a set of animation keyframes named "slide14" using CSS. These keyframes are instructions for how an element should change its appearance over time. In simple terms, the animation goes through four stages: 
1. At 25% of the animation duration, the element moves horizontally by a distance specified by a variable (--tx) and becomes invisible (opacity: 0).
2. At 50%, the element moves both horizontally and vertically by the distance specified by (--tx) and becomes fully visible (opacity: 1).
3. At 75%, the element moves horizontally back to its original position (0px) while maintaining the vertical offset defined by (--tx) and becomes invisible again.
4. Finally, at 100%, the element returns to its original position both horizontally and vertically (0px) while becoming fully visible (opacity: 1).
This code is used to create a sliding and fading animation effect for an element on a web page, where (--tx) is a variable that determines the distance of the element's movement.


Step 11. Set keyframes for dot two and three:-



@keyframes slide23{
  25%{
    transform: translateY(var(--ty));
    opacity: 1;
  }
  50%{
    transform: translateX(var(--tx)) translateY(var(--ty));
    opacity: 0;
  }
  75%{
    transform: translateX(var(--tx)) translateY(0px);
    opacity: 1;
  }
  100%{
    transform: translateX(0px) translateY(0px);
    opacity: 0;
  }
}

This code defines a set of animation keyframes called "slide23." It's used for creating an animation effect. In simple terms, during this animation, an element on a webpage will change its position and opacity over time. 
At 25% of the animation duration, the element will move vertically (up or down) by an amount specified by a variable called "--ty" and become fully visible (opacity: 1).
At 50%, it will move both horizontally (left or right) by an amount specified by "--tx" and vertically by "--ty" while fading out (opacity: 0).
At 75%, it will continue moving horizontally by "--tx" but won't move vertically (Y position remains at 0), and it becomes fully visible again (opacity: 1).
Finally, at 100%, it will return to its initial position (both X and Y at 0) while fading out again (opacity: 0). This animation will occur smoothly between these keyframes, creating a visual sliding and fading effect for the element.


---END---

Comments

Post a Comment