Home
Jawad Alhomaidi
Rating Three

Rating Three

This tailwind example is contributed by Jawad Alhomaidi, on 22-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are loading, loader

Spinner / Loading

Author Jawad Alhomaidi

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Colorful Home Components</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"
      rel="stylesheet"
    />
    <style>
      /* أنماط الهيدر والشعار الدوار */
      .wifi-rotating-logo {
        position: relative;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

.wifi-rotating-logo i {
        font-size: 16px;
        z-index: 2;
        transition: color 0.3s ease;
      }

.rotating-ring {
        position: absolute;
        border: 1.5px solid;
        border-radius: 50%;
        border-top-color: transparent !important;
        transition: border-color 0.3s ease;
      }

.ring-1 {
        width: 46px;
        height: 46px;
        animation: rotate 3s linear infinite;
      }

.ring-2 {
        width: 40px;
        height: 40px;
        animation: rotate 2s linear infinite reverse;
      }

.ring-3 {
        width: 34px;
        height: 34px;
        animation: rotate 1.5s linear infinite;
      }

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

100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body class="bg-gray-50">
    <div class="wifi-logo-container relative">
      <div class="wifi-rotating-logo">
        <i
          class="fas fa-wifi text-blue-600 dark:text-green-400 transition-colors duration-300"
        ></i>
        <div
          class="rotating-ring ring-1 border-green-500 dark:border-blue-400 border-t-transparent"
        ></div>
        <div
          class="rotating-ring ring-2 border-green-500 dark:border-blue-400 border-t-transparent"
        ></div>
        <div
          class="rotating-ring ring-3 border-green-500 dark:border-blue-400 border-t-transparent"
        ></div>
      </div>
    </div>
  </body>
</html>

Related Examples

Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

1 year ago

2.8k
Skeleton Loader
The Skeleton Loader is a placeholder component that creates a smooth loading animation to mimic the layout of the actual content. It enhances user experience by setting clear expectations during data loading. Supports different shapes (rectangles, circles, etc.). Adjustable sizes and durations for animation. Works well with dynamic content such as cards, text, or images. Highly customizable and responsive.

Author:
Anonymous

5 months ago

591
Tailwind Spinner(Loader)
simple and precise

Author:
Tamani Phiri

2 years ago

9.3k
Steps -4

Author:
farisubuntu

1 year ago

2.2k
Gradient Spinner

Author:
sql_guru

2 years ago

13.4k
Spinner
Gradient Spinner

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.5k
Steps -2

Author:
farisubuntu

1 year ago

2k
Spinners with shadow

Author:
Samuel Dawson

3 years ago

8.4k
tailwind loading animation
Spinner component provides a dynamic loader indicator with animated

Author:
Menna Bashir

9 months ago

1.4k
Pulse / Throbbing loading animation

Author:
Freja Jensen

2 years ago

16.9k
spinner

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

1.4k
Loader
loading

Author:
Aman kumar

1 year ago

3.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components