Spatial Pulse Loader

loaders

Radial beacon pulse loader with glowing ring reflections.

#loader#pulse#beacon#spatial

Live Interactive Preview

Component Source Code

Select language in the dropdown

SpatialPulseLoader.tsx

1'use client';
2
3import React from 'react';
4
5export default function SpatialPulseLoader() {
6  return (
7    <div className="flex items-center justify-center p-8">
8      <div className="relative flex h-16 w-16 items-center justify-center">
9        <span className="absolute h-full w-full rounded-full bg-cyan-400 opacity-75 animate-ping" />
10        <span className="relative flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-tr from-cyan-500 to-blue-600 shadow-lg shadow-cyan-500/50">
11          <span className="h-3 w-3 rounded-full bg-white animate-pulse" />
12        </span>
13      </div>
14    </div>
15  );
16}

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/SpatialPulseLoader.tsx and paste the copied code from the source viewer above.

Step 4: Usage Example

ExamplePage.tsx

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