Finger Tap Loading Animation || Loading Animation



Step1: HTML

<body>
  <div id="base">
    <div id="finger1">
      <div class="nail"></div>
    </div>
    <div id="finger2">
      <div class="nail"></div>
    </div>
    <div id="finger3">
      <div class="nail"></div>
    </div>
    <div id="finger4">
      <div class="nail"></div>
    </div>
    <div id="finger5"></div>
  </div>
</body>

This code represents a simple webpage structure using HTML. Inside the `<body>` element, there is a main `<div>` with the id "base," which can be thought of as a hand. Inside this "hand," there are five `<div>` elements with different ids ("finger1" to "finger5"). Each of these "finger" divs represents a finger, and inside each "finger" div, there is a child `<div>` with the class "nail," which can be seen as a nail at the tip of each finger. The code visually structures a hand with five fingers, each with a nail, and this structure can be used for various purposes in web development or design, like creating hand-related illustrations or user interfaces.

Step-2: CSS

*{
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

This code is written in CSS and is used to style web pages. It targets all elements on a webpage, including the main elements and any elements that might be added before or after them. The code sets three CSS properties to certain values for these elements. First, it sets the 'padding' and 'margin' to zero, which means there won't be any extra space around the elements. Second, it sets the 'box-sizing' property to 'border-box', which ensures that the width and height of elements include the padding and border, making it easier to control the size and layout of the elements. This code essentially helps create a consistent and controlled layout for web pages by resetting some default styles for all elements.

Step-4: 

body{
  background-color:purple;
  display: flex;
  align-items: center;
  justify-content: center;
}

This block of code is used to style a webpage's body element using Cascading Style Sheets (CSS). It sets the background color of the webpage to purple. It also changes the layout of the content inside the body element. The "display: flex" property is applied, which means the content within the body will be organized in a flexible way, allowing for easy alignment and positioning. "align-items: center" centers the content vertically, and "justify-content: center" centers it horizontally within the body, ensuring that the content in the webpage will be both vertically and horizontally centered on the purple background.


Step5:

#base{
  height: fit-content;
  width: fit-content;
  padding: 20px;
  position: relative;
}

This code defines a set of styling rules for an HTML element with the class "base." It specifies that this element should have a height and width that automatically adjust to fit its content, meaning it will be as big as its content inside. It also adds a 20-pixel padding around the element's content. The "position: relative" rule indicates that this element will be positioned relative to its normal position in the document flow, which allows for more complex layout adjustments using CSS. Essentially, it's styling an element to be the size of its content with some extra space around it and enabling positioning options.

Step-6:


#finger1{
  background-color: pink;
  display: inline-block;
  height: 90px;
  width: 40px;
  border-radius: 15px;
  animation-name: finger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 0ms;
}

This code is defining the style for an HTML element with the ID "finger1." It specifies that this element should have a pink background color, be displayed as an inline block, have a height of 90 pixels, a width of 40 pixels, and rounded corners with a 15-pixel radius. Additionally, it uses CSS animations, indicating that there's an animation named "finger" that should run for 2 seconds and repeat infinitely (never stop). The animation starts immediately, with no delay (0 milliseconds). This code essentially styles an element to create a pink rectangular shape with rounded edges, and it makes it continuously animate using the specified "finger" animation.


Step-7:


#finger2{
  background-color: pink;
  display: inline-block;
  height: 120px;
  width: 40px;
  border-radius: 15px;
  animation-name: finger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 200ms;
}

This code is used to style an HTML element with the ID "finger2." It sets the background color to pink and makes the element a small rectangular shape with rounded corners. It also applies an animation to it called "finger" that lasts for 2 seconds, repeats infinitely, and has a delay of 200 milliseconds before starting again. This means the pink rectangle will continuously animate in a certain way, which is defined elsewhere in the CSS code, and it will keep doing so forever.

Step-8:


#finger3{
  background-color: pink;
  display: inline-block;
  height: 150px;
  width: 40px;
  border-radius: 15px;
  animation-name: finger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 400ms;
}

This code is for styling an HTML element with the id "finger3." It sets the background color of the element to pink and makes it a block that flows inline with other elements. The element is 150 pixels tall, 40 pixels wide, and has rounded corners. It also uses an animation called "finger" that lasts for 2 seconds, repeats infinitely, and starts after a 400-millisecond delay. This code is typically used to create a visual effect, like a moving or blinking element on a web page, by applying these CSS properties and values to an HTML element with the id "finger3."

Step-9:


#finger4{
  background-color: pink;
  display: inline-block;
  height: 120px;
  width: 40px;
  border-radius: 15px;
  animation-name: finger;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 600ms;
}

This code is describing how a webpage element with the ID "finger4" should look and behave. It sets the background color to pink, makes it a small rectangular shape with rounded corners (like a pill), and gives it a height of 120 pixels and a width of 40 pixels. Additionally, it specifies an animation called "finger" that should last for 2 seconds, repeat infinitely, and start after a delay of 600 milliseconds. This means that the "finger4" element will have a pink color, be a small rounded rectangle, and continuously perform the "finger" animation, which may involve movement or other visual changes over the specified time period.


Step-10:


#finger5{
  background-color: pink;
  display: inline-block;
  height: 40px;
  width: 50px;
  border-radius: 15px;
}

This code is used to style an HTML element with the ID "finger5." It sets the background color of the element to pink, making it appear with a pink background. The element is displayed as an inline block, meaning it will be shown in a line with other content but can have its own width and height. It's given a height of 40 pixels and a width of 50 pixels, making it 40 pixels tall and 50 pixels wide. Additionally, it gives the element rounded corners with a border radius of 15 pixels, so the corners will be slightly curved. In simple terms, this code is defining the appearance of a specific element on a web page, making it pink, specifying its size, and giving it rounded edges.


Step-11:


#finger1::after, #finger2::after, #finger3::after, #finger4::after {
  content: "";
  display: block;
  height: 2px;
  width: 20px;
  background-color: gray;
  position: relative;
  top: 10%;
}

This code is written in a programming language called CSS and is used to style web pages. It is targeting elements with IDs "finger1," "finger2," "finger3," and "finger4" and adding a visual element to them. It creates a horizontal line that is 2 pixels high and 20 pixels wide, colored gray. This line is positioned 10% from the top of its container, making it look like a small line or decoration on those elements. Essentially, it's adding a thin gray line near the top of these elements to enhance their visual appearance on a webpage.


Step-12:


.nail{
      height: 25px;
  width: 30px;
  background-color: white;
  position: relative;
  top: calc(100% - 30px);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

This code defines the style for an HTML element with the class "nail." It sets the element's height to 25 pixels and width to 30 pixels, giving it a rectangular shape. The background color is white, and the element is positioned relative to its normal position in the document flow. It is moved to the top of its containing element by an amount calculated as 100% minus 30 pixels, which effectively positions it near the top. Additionally, it rounds the bottom-left and bottom-right corners with a 10-pixel radius, making it look like a nailhead or a button with rounded corners.


Step-13

@keyframes finger{
   0%{
   transform: translateY(0px);
  }
   30%{
   transform: translateY(-20px);
  }
  70%{
   transform: translateY(0px);
  }
}

This code defines a set of animations using the "@keyframes" rule in Cascading Style Sheets (CSS). The animation is named "finger" and consists of three keyframes that specify how an element should move over time. At the start (0%), the element is at its original position with no vertical (up or down) translation. At 30% into the animation, the element moves up by 20 pixels. At 70%, it returns to its original position. These keyframes describe a simple animation where an element moves up and down in a repeating pattern. It could be applied to an HTML element to create a visual effect where it appears to bounce or move up and down.

Step-1


a{
  text-decoration: none;
  display:inline-block;
  width : fit-content;
  position: relative;
  top: 30vh;
  background-color: rgb(20, 120, 220);
  color: black;
  padding: 12px;
  border-radius: 50px;
  color : white;
  box-shadow:
  inset 3px 3px 5px rgb(89, 172, 255),
  inset -3px -3px 5px rgb(16, 82, 148),
  3px 3px 5px gray;
}

This code is for styling a link (anchor tag <a>) in a web page. It does several things to the link's appearance. It removes the default underline decoration, makes the link an inline block element, adjusts its width to fit its content, positions it 30% down the height of the viewport, gives it a blue background color, sets the text color to black, adds padding around the link, rounds its corners, changes the text color to white, and applies a box shadow to create a three-dimensional effect with multiple shades around the link. Overall, it's a set of style rules to make a stylish and visually appealing link on a web page.


---END---



Comments

Post a Comment