Simple Loader v6 || 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 class="dot five"></div>
   <div class="dot six"></div>
   <div class="dot seven"></div>
   <div class="dot eight"></div>
  </div>
</body>

This HTML code represents a webpage structure. Inside the `<body>` element, there is a `<div>` with the class "base." Within this "base" `<div>`, there are eight other `<div>` elements, each with a different class name like "dot one," "dot two," and so on. These classes are typically used to apply styles or CSS to these elements. So, it seems like this code is creating a container ("base") with eight dots inside it, possibly for visual or design purposes on a webpage.

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

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

This code is written in CSS (Cascading Style Sheets) and is used to style web pages. It applies a set of styles to all elements on a webpage, as well as their "before" and "after" pseudo-elements. The styles include setting the padding and margin of these elements to zero and using the "box-sizing" property with the "border-box" value. This means that when determining the size of an element, the browser will include the element's padding and border in its calculation, ensuring that the content inside the element fits properly within its specified dimensions. Essentially, this code helps ensure a consistent and predictable layout for all elements and their pseudo-elements on a webpage.

Step 3. Style <body>:-

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

Certainly! This code is written in CSS, a language used for designing the layout and appearance of web pages. In simple terms, it's styling how a webpage should look. The code is specifying styles for the 'body' element of a webpage. 

- `height: 100vh;` means the body's height will be 100% of the viewport height, ensuring it covers the whole screen vertically.
- `display: flex;` sets the body to use a flexbox layout, allowing flexible arrangement of items inside.
- `align-items: center;` centers the content vertically within the body.
- `justify-content: center;` centers the content horizontally within the body.

So, when you apply this code, the content inside the body of the webpage will be both vertically and horizontally centered on the screen, regardless of the screen size.

Step 4. Create a base for loader :-

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

This code defines a CSS class called ".base." This class is meant to style HTML elements. It sets the height and width of the element to 250 pixels, making it a square shape. It also gives the element a circular appearance by using "border-radius: 50%," which rounds the corners. The "position: relative" property is used to control the element's positioning within its parent element. "display: flex" is used to enable flexbox layout, allowing the content inside the element to be centered both vertically and horizontally with "align-items" and "justify-content" set to "center," respectively. In simple terms, this code styles an element to be a centered, circular container with a size of 250 pixels by 250 pixels.


Step 5. Style all dots at once :-

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

This CSS code defines a class called ".dot" that styles an HTML element. It sets the height and width of the element to 50 pixels, gives it a black background color, and makes its shape circular with rounded corners. The element is positioned absolutely, meaning it's placed relative to its closest positioned ancestor. It uses the "calc" function to calculate its left and top positions based on certain variables (--x and --y). The element's opacity is set to 0, making it initially invisible. It's then animated using a keyframe animation named "blink" with a duration of 800 milliseconds, a delay determined by the "--delay" variable, and it repeats infinitely with a linear timing function. In simpler terms, this code styles a hidden circular dot that will appear, blink, and move based on the values of the variables (--x, --y, and --delay) when applied to an HTML element with the ".dot" class.

Step 6. Set position and delay properties for dots separately:-

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

This code is defining a set of CSS classes (one through eight), and for each class, it's setting some custom properties (variables) using CSS custom properties (variables start with "--"). These properties include "--x" and "--y," which specify horizontal and vertical positions, and "--delay," which specifies a delay in milliseconds. These classes and their properties seem to be related to positioning elements on a web page or creating animations with specific starting positions and delays. These custom properties can then be used elsewhere in your CSS to control the positioning and timing of elements on your webpage.


Step 7. Set keyframes:-

@keyframes blink {
  from{
    opacity: 1;
    transform: scale(1);
  }
  to{
    opacity: 0;
    transform: scale(0.5);
  }
}

This code defines a set of animation instructions using the "@keyframes" rule called "blink." This animation makes an element go from fully visible (opacity 1) and its regular size (scale 1) to completely invisible (opacity 0) and smaller in size (scale 0.5). The "from" keyword represents the starting point of the animation, and the "to" keyword represents the ending point. So, when you apply this animation to an HTML element, it will smoothly transition from being visible and its original size to being invisible and smaller, creating a blinking effect.


---END---

Comments

Post a Comment