Home
Tanvir Hasan Bappy (Tanvir)
Server Control Center

Server Control Center

This tailwind example is contributed by Tanvir Hasan Bappy (Tanvir), on 11-Aug-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are loading, loader

Spinner / Loading

Author Tanvir Hasan Bappy (Tanvir)

198

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Server Control Center</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
  <style>
    .gradient-text {
      background: linear-gradient(90deg, #00ff88, #00ffaa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    @keyframes blink {
      0%, 50%, 100% { opacity: 1; }
      25%, 75% { opacity: 0; }
    }
    .cursor {
      animation: blink 1s infinite;
    }
    body {
      background: radial-gradient(circle at top, #001a1a 0%, #000 100%);
      overflow: hidden;
    }
    body::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: repeating-linear-gradient(
        45deg,
        rgba(0, 255, 136, 0.05) 0,
        rgba(0, 255, 136, 0.05) 2px,
        transparent 2px,
        transparent 4px
      );
      animation: moveBackground 30s linear infinite;
    }
    @keyframes moveBackground {
      0% { transform: translate(0,0); }
      100% { transform: translate(50px, 50px); }
    }
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(2px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .animate-fadeIn {
      animation: fadeIn 0.4s ease forwards;
    }
  </style>
</head>
<body x-data="bootSequence()" x-init="startBoot()" class="relative text-green-400">

<div class="mb-6 sm:mb-8 text-center">
        <h1 
          class="text-xl sm:text-3xl md:text-5xl lg:text-6xl font-bold gradient-text mb-2 opacity-0 transition-all duration-700"
          :class="{'opacity-100 translate-y-0': started}"
          style="transform: translateY(-20px);"
        >
          SERVER CONTROL CENTER
        </h1>
        <p 
          class="text-green-300 text-xs sm:text-base md:text-lg opacity-0 transition-opacity duration-700 delay-300"
          :class="{'opacity-100': started}"
        >
          Backend Engineering Command Interface
        </p>
      </div>

<div 
        class="bg-black/50 backdrop-blur-md border border-green-500/40 rounded-lg p-2 sm:p-4 h-56 sm:h-72 md:h-80 lg:h-96 overflow-y-auto text-[10px] sm:text-sm md:text-base shadow-lg opacity-0 translate-y-5 transition-all duration-700 delay-500"
        :class="{'opacity-100 translate-y-0': started}"
      >
        <template x-for="(message, index) in bootMessages" :key="index">
          <div class="mb-1 animate-fadeIn">
            <span class="text-green-500">[SYSTEM]</span> 
            <span class="text-green-300" x-text="message"></span>
          </div>
        </template>
        <template x-if="bootMessages.length < bootSequenceMessages.length">
          <span class="text-green-400 cursor">▋</span>
        </template>
      </div>

<div class="mt-4 sm:mt-6 opacity-0 transition-opacity duration-700 delay-700" :class="{'opacity-100': started}">
        <div class="w-full bg-gray-900/70 rounded-full h-2 sm:h-3 overflow-hidden shadow-inner">
          <div 
            class="bg-gradient-to-r from-green-400 to-green-500 h-2 sm:h-3 rounded-full shadow-lg shadow-green-500/40 transition-all duration-300"
            :style="`width: ${progress}%`"
          ></div>
        </div>
        <div class="flex justify-between mt-2 text-[10px] sm:text-xs md:text-sm text-green-300 font-light">
          <span x-text="`BOOT SEQUENCE: ${Math.floor(progress)}%`"></span>
          <span x-text="progress >= 100 ? 'COMPLETE' : 'IN PROGRESS'"></span>
        </div>
      </div>

</div>
  </div>

</body>
</html>

Related Examples

3D Box

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

1 year ago

5.5k
Custom Loader
Custom loading with different colors

Author:
Deepak Kumar Chouhan

10 months ago

1.1k
Spinner rings
open ring spinners

Author:
Samuel Dawson

2 years ago

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

9 months ago

1.9k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.6k
Loading animation using animate-ping

Author:
JaxStone

2 years ago

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

4 months ago

407
Animated loading dots

Author:
TailwindFlex

2 years ago

16.6k
Spinner in tailwind

Author:
Samuel Dawson

2 years ago

14.4k
Pulse / Throbbing loading animation

Author:
Freja Jensen

2 years ago

16.8k
Loading Spinner Component - Animated Circle Loader
Loading spinner component featuring a smooth animated circle loader with dashed border animation. Perfect for website loading states, content loading indicators, and improving user experience during page transitions. Easy to implement and customize for any project.

Author:
Homayoun

1 month ago

228
Tailwind spinner
loading spinner component

Author:
Arya

3 years ago

39.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components