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

159

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 Multiple Colored Segments

Author:
Anonymous

1 year ago

2.5k
Spinner Design
Loader Design spinning loading dark mode supported and responsive

Author:
Shariar Hasan

1 year ago

5.8k
3D Box

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

1 year ago

5.6k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

3 years ago

24.7k
Spinner
The Spinner is a simple and visually appealing component that indicates ongoing processes like loading or data fetching. It's a great way to improve user engagement and reduce frustration during wait times. Different styles and animations (circular, dots, pulsating). Customizable size, color, and speed. Easy to integrate with loading states in any app. Lightweight and responsive.

Author:
Abhiraj

11 months ago

2.1k
Button with loading

Author:
Prem..

3 years ago

19.5k
Spinner
Gradient Spinner

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

1 year ago

4.5k
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

6 months ago

490
Gradient Spinner

Author:
sql_guru

2 years ago

13.4k
Contact Spinner
Contact button spinning

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

1 year ago

5.5k
Animated loading dots

Author:
TailwindFlex

3 years ago

16.7k
Tailwind CSS Loading Spinner
simple tailwind CSS spinner with some custom CSS animation

Author:
Victor M

11 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components