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)

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

Author:
Sienna

2 years ago

10.6k
Animated loading dots

Author:
TailwindFlex

2 years ago

16.2k
Loading animation using animate-ping

Author:
JaxStone

2 years ago

16.9k
Loading Overlay
Add loading overlay to your divs

Author:
Prajwal Hallale

2 years ago

24.3k
Steps -4

Author:
farisubuntu

11 months ago

1.8k
Loding spinner with image inside

Author:
JaxStone

2 years ago

15.5k
Contact Spinner
Contact button spinning

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

1 year ago

5k
Custom Loader
Custom loading with different colors

Author:
Deepak Kumar Chouhan

7 months ago

690
Tailwind spinner
loading spinner component

Author:
Arya

2 years ago

38.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

2 months ago

141
Loading dots
Black Loading dots

Author:
Никита (Whiso)

7 months ago

1.5k
Loading spinner

Author:
Prem..

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components