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)

578

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
Gradient Spinner

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

1 year ago

4.5k
Spinner With Label

Author:
farisubuntu

1 year ago

1.2k
Loading spinner

Author:
Prem..

2 years ago

13k
Ripple Animation

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

9 months ago

1.9k
animate-spin spinner

Author:
Piet Vriend

2 years ago

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

7 months ago

638
Spinner

Author:
Fagundo67

2 years ago

11.5k
Spinner

Author:
Sienna

2 years ago

10.8k
Animated loading dots

Author:
TailwindFlex

3 years ago

16.9k
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)

8 months ago

855
Rating Three

Author:
Jawad Alhomaidi

2 months ago

174
Loading spinner

Author:
Mohit Prajapati

3 years ago

18.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components