Orbiting Rings Loader

loaders

Multi-layer concentric gyroscopic spinning rings with glowing orbital photon bead.

#orbit#rings#loader#gyroscope#spatial

Live Interactive Preview

Loading Orbit

Component Source Code

Select language in the dropdown

OrbitingRingsLoader.tsx

1'use client';
2
3import React from 'react';
4
5export default function OrbitingRingsLoader() {
6  return (
7    <div className="flex flex-col items-center justify-center p-6 select-none">
8      <div className="relative flex h-20 w-20 items-center justify-center">
9        <div className="absolute inset-0 rounded-full border-2 border-transparent border-t-cyan-400 border-r-cyan-400 animate-[spin_1.5s_linear_infinite]" />
10        <div className="absolute inset-2 rounded-full border-2 border-transparent border-b-blue-500 border-l-blue-500 animate-[spin_1.2s_linear_infinite_reverse]" />
11        <div className="absolute inset-4 rounded-full border-2 border-transparent border-t-indigo-500 animate-[spin_0.8s_linear_infinite]" />
12        <div className="h-2.5 w-2.5 rounded-full bg-cyan-400 shadow-[0_0_12px_#22d3ee] animate-ping" />
13      </div>
14      <span className="mt-3 text-xs font-mono font-medium text-cyan-400/90 tracking-wider uppercase">Loading Orbit</span>
15    </div>
16  );
17}

Installation & Integration Guide

Step 1: Tailwind CSS v4 Setup

Tailwind Docs

If you do not have Tailwind installed yet, run this installation command:

Terminal

npm install tailwindcss @tailwindcss/postcss postcss

Then add the Tailwind directive to your main stylesheet (globals.css):

@import "tailwindcss";

Step 2: Install Icon Dependencies

npm install lucide-react react-icons

Step 3: Add Component File

Create a new file in your project at src/components/loaders/OrbitingRingsLoader.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

1import OrbitingRingsLoader from '@/components/loaders/OrbitingRingsLoader';
2
3export default function ExamplePage() {
4  return (
5    <main className="p-8 flex items-center justify-center min-h-screen">
6      <OrbitingRingsLoader />
7    </main>
8  );
9}