Back To Tutorials

Page Loader Animation

Intermediatechallenge

In this challenge, you will create a page loader animation using HTML and CSS. The loader should be a visually engaging animation that displays while the page is loading. Common loader designs include spinning circles, bouncing dots, or pulsating elements. Your task is to create a loader that effectively grabs user attention while being stylish and non-intrusive.

Objective:

  • Learn how to create smooth and engaging animations using CSS.
  • Understand how to use CSS properties and animations to create a visually appealing loader.

Requirements:

  1. Use HTML and CSS only (no JavaScript).
  2. Create a loader animation that can be displayed while the page is loading.
  3. The animation should be smooth, visually appealing, and non-intrusive.
  4. Ensure the loader is centered on the page and does not affect the page layout.

Steps:

  1. HTML Structure:

    • Create a div element for the loader.
    • Inside the loader div, add any necessary elements for the animation (e.g., additional divs for different parts of the loader).

  2. CSS Styling:

    • Use CSS properties such as animation, keyframes, border-radius, and transform to create the animation effect.
    • Style the loader to be visually appealing and ensure it is centered on the page.

  3. Animation:

    • Define CSS keyframes to create the animation effect (e.g., spinning, bouncing, pulsating).
    • Apply the animation to the loader element.

  4. Testing:

    • Ensure the loader animation works correctly and looks good on various screen sizes and devices.
    • Make sure the loader does not interfere with the page content or layout.

Resources:

Solution:

Your solution should include:

  • A complete HTML and CSS file.
  • A page loader animation that is smooth and visually appealing.
  • A design that is centered and does not affect the page layout.
<!-- HTML structure -->
<div class="loader"></div>

css

/* CSS for page loader animation */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
}

.loader {
  width: 80px;
  height: 80px;
  border: 8px solid #e0e0e0;
  border-top: 8px solid #4db8ff;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

Explanation:

  • HTML Structure: A single div element with the class .loader represents the loader.
  • CSS Styling:
    • .loader: Sets up the size, border, and border-radius to create a circular loader. The border-top property is used to create the visible spinning effect.
    • @keyframes spin: Defines the animation to rotate the loader continuously.
  • Animation: The spin animation smoothly rotates the loader, creating a spinning effect. The linear timing function ensures a consistent rotation speed.

Feel free to adjust the size, colors, and animation speed to fit your design needs.