Dual Ring Spinner

[Sujal200507]

Component Name

Dual Ring Spinner

Description

A stylish and responsive loading spinner with two concentric rings rotating in opposite directions — gives a visually appealing loading animation. Built with Tailwind CSS and uses custom keyframes.

Preview

Features

• Dual-ring animation (clockwise + counter-clockwise)
• Fully responsive
• Pure Tailwind CSS (no extra dependencies)
• Easy to integrate

Requirements

If you're using Tailwind CSS via CDN, add this inside a <style> tag in your HTML:

<style>
@keyframes spin-reverse {
  from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}
.animate-spin-reverse {
  animation: spin-reverse 1s linear infinite;
}
</style>



## Code
```html
<div class="relative w-12 h-12 sm:w-16 sm:h-16 md:w-20 md:h-20">
  <!-- Outer Ring -->
  <div class="w-full h-full border-2 sm:border-[3px] md:border-4 border-gray-300 border-t-orange-500 rounded-full animate-spin"></div>

  <!-- Inner Ring -->
  <div class="absolute top-[12.5%] left-[12.5%] w-[75%] h-[75%] border-2 sm:border-[3px] md:border-4 border-gray-300 border-b-orange-500 rounded-full animate-spin-reverse"></div>
</div>

If you're using a build tool like Vite, PostCSS, or Next.js, follow these steps:
```tailwind.config.js
module.exports = {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      keyframes: {
        'spin-reverse': {
          from: { transform: 'rotate(360deg)' },
          to: { transform: 'rotate(0deg)' },
        },
      },
      animation: {
        'spin-reverse': 'spin-reverse 1s linear infinite',
      },
    },
  },
  plugins: [],
};