CSS LOADING EFFECT

Create a loading effect in CSS:

loader-image

Step 1: HTML Structure

HTML:
<div class="loading"></div>

In this step, we create an HTML <div> element with a class of "loading." This is the element that we will apply our CSS animation to.

Step 2: Basic CSS Styling

body { height: 100vh; background-color: #f1f1f1; perspective: 100px; } 
.loading { width: 100px; height: 100px; background-color: #3498db; }

In this step, we set up some basic CSS styles. We give the <body> background color and set a perspective value for the 3D transformation. The .loading class defines the initial size and background color of our loading element.

Step 3: Keyframes Animation

@keyframes loading
 {
 0% { transform: rotateX(0) rotateY(0); } 
50% { transform: rotateX(0) rotateY(180deg); } 
100% { transform: rotateX(180deg) rotateY(180deg); } 
}

In this step, we define the @keyframes animation named "loading." This animation rotates the element in a 3D space. We have three keyframes:

  • At 0%, the element is not rotated at all (rotateX(0) and rotateY(0)).
  • At 50%, the element is rotated 180 degrees along the y-axis (rotateY(180deg)).
  • At 100%, the element is rotated 180 degrees along both the x-axis and y-axis (rotateX(180deg) and rotateY(180deg)).

Step 4: Apply the Animation

.loading { 
animation-name: loading; 
animation-duration: 2s; 
animation-timing-function: linear; 
animation-iteration-count: infinite; 
}

In this step, we apply the "loading" animation to the .loading element. We specify the animation's name, duration (2 seconds), timing function (linear), and iteration count (infinite).

That's it! Now, when you reload your browser, you will see the loading animation where the element rotates in a 3D space as described in the keyframes.

see Demo: Codepen