Glassmorphism Pulse Loader

loaders

Translucent glass frosted card with inner luminous pulsating radial beacon.

#glassmorphism#pulse#blur#frosted#loader

Live Interactive Preview

Processing Spatial Asset

Component Source Code

Select language in the dropdown

GlassMorphPulseLoader.tsx

1'use client';
2
3import React from 'react';
4
5export default function GlassMorphPulseLoader() {
6  return (
7    <div className="flex flex-col items-center justify-center p-6 select-none">
8      <div className="relative flex h-24 w-24 items-center justify-center rounded-3xl border border-white/20 bg-slate-900/60 backdrop-blur-xl shadow-2xl overflow-hidden">
9        <div className="absolute -inset-2 bg-gradient-to-tr from-purple-500 via-indigo-500 to-cyan-400 opacity-60 blur-lg animate-pulse" />
10        
11        <div className="relative flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 border border-white/30 backdrop-blur-md shadow-inner">
12          <div className="h-4 w-4 rounded-full bg-gradient-to-tr from-cyan-400 to-indigo-400 shadow-[0_0_12px_#22d3ee] animate-ping" />
13        </div>
14      </div>
15      <span className="mt-3 text-xs font-semibold text-slate-300 tracking-wide">Processing Spatial Asset</span>
16    </div>
17  );
18}

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

Step 4: Usage Example

ExamplePage.tsx

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