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

Spinner with Multiple Colored Segments

Author:
Anonymous

11 months ago

2.4k
Tailwind CSS Loading Spinner
simple tailwind CSS spinner with some custom CSS animation

Author:
Victor M

10 months ago

1.2k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

3 years ago

24.6k
Button With Loader
Tailwind Loader

Author:
Md. Tofayel islam

1 year ago

2.7k
Dashed spinners

Author:
Samuel Dawson

2 years ago

9.7k
Your Creative Login Page
"Animated Image Login UI" "Tailwind Image Login with Animated Background" "Innovative User Login Experience" "Creative Bubble Background Login" "Login with Personality — Featuring Your Image" "Acode Master Animated Login" ✅ (customized for you)

Author:
Code Master(Mfuranziza Dusabe Hamza)

6 months ago

595
Animated loading dots

Author:
TailwindFlex

2 years ago

16.6k
Full Page Loading Overlay

Author:
Prashant

3 years ago

27.6k
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

6 months ago

1.5k
Spinner rings

Author:
Samuel Dawson

2 years ago

13k
Progress bar

Author:
Rajesh Maheshwari

9 months ago

998
Ovel shaped loading spinner

Author:
Freja Jensen

2 years ago

17.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components