Custom loading animations - Rishan Solutions

Loading animations are crucial in providing a better user experience, especially for pages or content that take time to load. Custom loading animations can help keep users engaged while waiting, adding a visual appeal to your website or portal. In this guide, we’ll explore how to create custom loading animations using CSS and JavaScript, as well as how to customize them for your portal.

1. Why Custom Loading Animations Matter

Custom loading animations serve several purposes:

User Experience (UX): They signal to users that the system is working and content is being loaded, reducing the perception of a slow website.
Branding: Custom animations can reflect your brand’s personality and provide a unique touch.
Performance Perception: A loading animation can make a site appear faster, as it reassures the user that something is happening while waiting for content.

2. Types of Loading Animations

There are various styles of loading animations. Here are some popular types:

Spinners: Circular animations that rotate to indicate that the page is loading.
Bars: Progress bars or horizontal loading indicators that fill as the content is loaded.
Dots: Animated dots that appear and disappear to indicate activity.
Skeleton Screens: These show a basic outline of the page content while it is loading, giving a “skeleton” preview of the layout.

3. CSS Spinners for Custom Loading Animations

Spinners are one of the most commonly used loading animations. They are simple to implement and provide an elegant indication of loading.

Example: Basic CSS Spinner

<div class="spinner"></div>

.spinner {
  border: 4px solid #f3f3f3; /* Light gray border */
  border-top: 4px solid #3498db; /* Blue border */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

In this example:

The spinner is created by applying a border with different colors.
The @keyframes spin rule animates the spinner by rotating it 360 degrees continuously.

4. CSS Dot Animation

Another simple yet effective loading animation is the dot animation, where multiple dots appear one after another to indicate loading.

Example: Dot Animation

<div class="dots">
  <span></span>
  <span></span>
  <span></span>
</div>

.dots {
  display: flex;
  justify-content: space-around;
  width: 50px;
}

.dots span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 3px;
  border-radius: 50%;
  background-color: #3498db;
  animation: dot-bounce 1.2s infinite ease-in-out;
}

.dots span:nth-child(1) {
  animation-delay: 0s;
}

.dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes dot-bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(0.8);
  }
}

This animation uses three dots that appear to “bounce” one after another, creating a rhythmic effect.

5. Custom Progress Bar Animation

A progress bar is another popular choice, especially when the user needs to be aware of the progress of a task, like uploading or processing files.

Example: Custom Progress Bar

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

.progress-container {
  width: 100%;
  height: 5px;
  background-color: #f3f3f3;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #3498db;
  animation: progress 5s linear infinite;
}

@keyframes progress {
  0% { width: 0%; }
  100% { width: 100%; }
}

Here, the progress-bar element grows from 0% to 100% over a span of 5 seconds, simulating the process of loading or completion.

6. CSS Skeleton Screens

Skeleton screens offer a more advanced loading animation by mimicking the layout of the content being loaded. These screens show placeholder elements like gray boxes to represent text or images until the actual content is rendered.

Example: Skeleton Screen

<div class="skeleton">
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
  <div class="skeleton-text"></div>
</div>

.skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-text {
  width: 100%;
  height: 20px;
  background-color: #e0e0e0;
  animation: shimmer 2s infinite linear;
  border-radius: 4px;
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

In this skeleton animation, gray rectangles simulate loading content (text) by using the shimmer effect that moves from left to right.

7. Using JavaScript to Control Loading Animations

Sometimes, you may want to trigger or stop loading animations using JavaScript based on certain events, such as when data is fetched or a page is fully loaded.

Example: Trigger Loading Animation with JavaScript

<div id="loading" class="spinner"></div>

<script>
  window.onload = function() {
    setTimeout(function() {
      document.getElementById("loading").style.display = "none";
    }, 3000); // Hide the spinner after 3 seconds
  }
</script>

Here, the loading spinner is hidden after the page finishes loading, simulating that the content is ready.

8. Customizing Loading Animations for Branding

To integrate the loading animation with your website’s design and branding, you can adjust the following:

Colors: Use your brand’s primary or secondary colors for background or animated elements.
Shapes: Modify the spinner or other elements to match your design aesthetics (e.g., rounded or square shapes).
Timing: Adjust animation speeds (e.g., slow for emphasis or fast for smoother transitions).
Interactive Effects: Add hover or interaction animations for a more engaging user experience.

For example, to match a brand color for the spinner:

.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #ff6347; /* Brand's red color */
}