<div class="loader-showcase">
  
  <div class="loader-row">
    <span class="name-label">Tech Radar</span>
    <div class="loader-tech"></div>
  </div>

  <div class="loader-row">
    <span class="name-label">Gaming RGB Nexus</span>
    <div class="loader-gaming"></div>
  </div>

  <div class="loader-row">
    <span class="name-label">Medical Pulse Cross</span>
    <div class="loader-medical"></div>
  </div>

  <div class="loader-row">
    <span class="name-label">E-Commerce Gold Coin</span>
    <div class="loader-ecommerce"></div>
  </div>

  <div class="loader-row">
    <span class="name-label">Corporate Minimalist</span>
    <div class="loader-corporate"></div>
  </div>

</div>

/* Base Container Styles for Centering */
.loader-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-color: #1a1a2e; /* Dark theme to make colors pop */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  gap: 60px;
  padding: 40px 0;
  box-sizing: border-box;
}

.loader-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.name-label {
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #a0a0b5;
}

/* 1. Tech Radar Loader (Dual-ring neon effect) */
.loader-tech {
  width: 50px;
  height: 50px;
  position: relative;
  border: 3px solid transparent;
  border-top-color: #00f3ff;
  border-bottom-color: #00f3ff;
  border-radius: 50%;
  animation: spin-tech 1s linear infinite;
}

.loader-tech::before {
  content: "";
  position: absolute;
  top: 5px; 
  left: 5px; 
  right: 5px; 
  bottom: 5px;
  border: 3px solid transparent;
  border-left-color: #0084ff;
  border-right-color: #0084ff;
  border-radius: 50%;
  animation: spin-tech 0.5s linear infinite reverse;
}

@keyframes spin-tech {
  100% { transform: rotate(360deg); }
}

/* 2. Gaming RGB Nexus Loader (Conic gradient spin) */
.loader-gaming {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
  animation: spin-gaming 1.5s linear infinite;
  position: relative;
}

.loader-gaming::after {
  content: "";
  position: absolute;
  top: 4px; 
  left: 4px; 
  right: 4px; 
  bottom: 4px;
  background-color: #1a1a2e; /* Matches showcase background */
  border-radius: 50%;
}

@keyframes spin-gaming {
  100% { transform: rotate(360deg); }
}

/* 3. Medical Pulse Cross Loader (Heartbeat animation) */
.loader-medical {
  width: 50px;
  height: 50px;
  background-color: #ff3366;
  border-radius: 50%;
  position: relative;
  animation: pulse-med 1.2s infinite ease-in-out;
}

.loader-medical::before, 
.loader-medical::after {
  content: "";
  position: absolute;
  background-color: white;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 2px;
}

.loader-medical::before { width: 22px; height: 4px; }
.loader-medical::after { width: 4px; height: 22px; }

@keyframes pulse-med {
  0% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(255, 51, 102, 0.7); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 15px rgba(255, 51, 102, 0); }
  100% { transform: scale(0.85); box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
}

/* 4. E-Commerce Gold Coin Loader (Y-axis 3D flip) */
.loader-ecommerce {
  width: 50px;
  height: 50px;
  background-color: #ffd700;
  border-radius: 50%;
  border: 3px dashed #cd853f;
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  animation: flip-coin 1.2s infinite linear;
}

@keyframes flip-coin {
  0% { transform: perspective(200px) rotateY(0deg); }
  100% { transform: perspective(200px) rotateY(360deg); }
}

/* 5. Corporate Minimalist Loader (Sleek variable-speed spin) */
.loader-corporate {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3px solid #e0e0e0;
  border-top-color: #333333;
  animation: spin-corp 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
}

@keyframes spin-corp {
  100% { transform: rotate(360deg); }
}

var difh = 850;