CSS LOADING EFFECT
Create a loading effect in CSS:
Step 1: HTML Structure
<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)
androtateY(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)
androtateY(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