Loading Screen

rohit
Feb 13, 2026 4
Live Preview

Live Editor

<div class="stage">

  <!-- LOADER -->
  <div id="loader">
    <canvas id="particles"></canvas>

    <div class="corner corner-tl"></div>
    <div class="corner corner-tr"></div>
    <div class="corner corner-bl"></div>
    <div class="corner corner-br"></div>

    <div class="loader-inner">

      <!-- Left -->
      <div class="left-col">
        <div class="hex-ring">
          <div class="ring ring-1"></div>
          <div class="ring ring-2"></div>
          <div class="ring ring-3"></div>
          <div class="hex-core">
            <div class="hex-core-symbol">⬡</div>
          </div>
        </div>
        <div class="brand-name">NEXUS OS</div>
        <div class="brand-ver">v4.2.0</div>
      </div>

      <!-- Right -->
      <div class="right-col">
        <div class="terminal" id="terminal"></div>
        <div class="divider"></div>
        <div>
          <div class="progress-meta">
            <span>LOADING MODULES</span>
            <span class="progress-pct" id="pct">0%</span>
          </div>
          <div class="bar-track">
            <div class="bar-fill" id="barFill"></div>
          </div>
        </div>
        <div class="status-row">
          <div class="chip" id="chip-0">AUTH</div>
          <div class="chip" id="chip-1">ASSETS</div>
          <div class="chip" id="chip-2">RUNTIME</div>
          <div class="chip" id="chip-3">NETWORK</div>
          <div class="chip" id="chip-4">READY</div>
        </div>
      </div>

    </div>
  </div>

  <!-- MAIN -->
  <div id="main">
    <div class="main-label">// System Online</div>
    <div class="main-title">NEXUS OS LOADED</div>
    <div class="main-sub">All systems operational · 0 errors detected</div>
    <button class="replay-btn" onclick="replayLoader()">↺ Replay</button>
  </div>

</div>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: 'Share Tech Mono', monospace;
  }

  /* ══════════════════════
     LOADER BOX — 400px
  ══════════════════════ */
  #loader {
    position: relative;
    width: min(700px, 98vw);
    height: 400px;
    background: #000508;
    border: 1px solid rgba(0,255,136,0.15);
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
  }
  #loader.hide { opacity: 0; visibility: hidden; pointer-events: none; }

  /* Canvas */
  #particles {
    position: absolute; inset: 0;
    z-index: 0; pointer-events: none;
    border-radius: 16px;
  }

  /* Scanlines */
  #loader::after {
    content: '';
    position: absolute; inset: 0; z-index: 2;
    background: repeating-linear-gradient(
      0deg, transparent, transparent 2px,
      rgba(0,255,136,0.015) 2px, rgba(0,255,136,0.015) 4px
    );
    pointer-events: none; border-radius: 16px;
  }

  /* Vignette */
  #loader::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(ellipse 80% 80% at 50% 50%,
      transparent 30%, rgba(0,5,8,0.75) 100%);
    pointer-events: none;
  }

  /* Corner brackets */
  .corner {
    position: absolute; width: 18px; height: 18px; z-index: 3;
  }
  .corner::before, .corner::after {
    content: ''; position: absolute;
    background: rgba(0,255,136,0.5);
  }
  .corner::before { width: 100%; height: 1px; top: 0; left: 0; }
  .corner::after  { width: 1px; height: 100%; top: 0; left: 0; }
  .corner-tl { top: 14px; left: 14px; }
  .corner-tr { top: 14px; right: 14px; transform: scaleX(-1); }
  .corner-bl { bottom: 14px; left: 14px; transform: scaleY(-1); }
  .corner-br { bottom: 14px; right: 14px; transform: scale(-1); }

  /* ── Inner layout — row ── */
  .loader-inner {
    position: relative; z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding: 32px 40px;
    width: 100%;
  }

  /* ── Left: ring + brand ── */
  .left-col {
    display: flex; flex-direction: column;
    align-items: center; gap: 14px;
    flex-shrink: 0;
  }

  .hex-ring {
    position: relative;
    width: 110px; height: 110px;
  }
  .ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1px solid transparent;
    animation: spin linear infinite;
  }
  .ring-1 {
    border-top-color: #00ff88;
    border-right-color: rgba(0,255,136,0.25);
    animation-duration: 2s;
    box-shadow: 0 0 12px rgba(0,255,136,0.25);
  }
  .ring-2 {
    inset: 10px;
    border-bottom-color: #00d4ff;
    border-left-color: rgba(0,212,255,0.25);
    animation-duration: 3s;
    animation-direction: reverse;
  }
  .ring-3 {
    inset: 22px;
    border-top-color: rgba(0,255,136,0.45);
    animation-duration: 1.5s;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  .hex-core {
    position: absolute; inset: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,136,0.12) 0%, transparent 70%);
    animation: corePulse 2s ease-in-out infinite;
  }
  .hex-core-symbol {
    font-family: 'Orbitron', monospace;
    font-size: 20px; font-weight: 900;
    color: #00ff88;
    text-shadow: 0 0 16px #00ff88, 0 0 32px rgba(0,255,136,0.4);
    animation: glitch 4s infinite;
  }
  @keyframes corePulse {
    0%,100% { box-shadow: 0 0 14px rgba(0,255,136,0.15); }
    50%      { box-shadow: 0 0 28px rgba(0,255,136,0.35); }
  }
  @keyframes glitch {
    0%,92%,100% { transform: none; text-shadow: 0 0 16px #00ff88; }
    93%  { transform: translate(-2px,1px) skewX(-2deg); text-shadow: -2px 0 #00d4ff, 2px 0 #ff2d55; }
    94%  { transform: translate(2px,-1px); }
    95%  { transform: translate(-1px,2px); text-shadow: 2px 0 #ff2d55; }
    96%  { transform: none; }
  }

  .brand-name {
    font-family: 'Orbitron', monospace;
    font-size: 15px; font-weight: 900;
    letter-spacing: 0.2em;
    color: #e0fff0;
    text-shadow: 0 0 20px rgba(0,255,136,0.3);
    white-space: nowrap;
  }
  .brand-ver {
    font-size: 9px; letter-spacing: 0.35em;
    color: rgba(0,255,136,0.35);
    text-transform: uppercase;
  }

  /* ── Right: terminal + bar + chips ── */
  .right-col {
    flex: 1; display: flex; flex-direction: column; gap: 14px;
    min-width: 0;
  }

  /* Terminal */
  .terminal {
    min-height: 72px;
    display: flex; flex-direction: column; gap: 5px;
  }
  .log-line {
    font-size: 10px;
    color: rgba(0,255,136,0.45);
    display: flex; gap: 8px; align-items: center;
    opacity: 0; transform: translateX(-6px);
    transition: all 0.3s ease;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .log-line.show  { opacity: 1; transform: translateX(0); }
  .log-line.done::before    { content: '✓'; color: #00ff88; }
  .log-line.running::before { content: '›'; color: #00d4ff; animation: blink 0.8s infinite; }
  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

  /* Divider */
  .divider { height: 1px; background: rgba(0,255,136,0.07); }

  /* Progress */
  .progress-meta {
    display: flex; justify-content: space-between;
    font-size: 9px; letter-spacing: 0.18em;
    color: rgba(0,255,136,0.35);
    margin-bottom: 6px;
  }
  .progress-pct {
    font-family: 'Orbitron', monospace;
    font-size: 12px; font-weight: 700;
    color: #00ff88;
    text-shadow: 0 0 10px #00ff88;
  }
  .bar-track {
    width: 100%; height: 3px;
    background: rgba(0,255,136,0.07);
    border-radius: 2px; position: relative;
  }
  .bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #00cc6a, #00ff88, #00d4ff);
    border-radius: 2px;
    transition: width 0.4s ease;
    box-shadow: 0 0 8px #00ff88, 0 0 18px rgba(0,255,136,0.35);
    position: relative;
  }
  .bar-fill::after {
    content: '';
    position: absolute; right: -2px; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 5px; border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px #00ff88, 0 0 18px rgba(0,255,136,0.5);
  }

  /* Chips */
  .status-row {
    display: flex; gap: 8px; flex-wrap: wrap;
  }
  .chip {
    font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 3px;
    border: 1px solid rgba(0,255,136,0.15);
    color: rgba(0,255,136,0.3);
    transition: all 0.4s;
  }
  .chip.active {
    border-color: rgba(0,255,136,0.5);
    color: #00ff88;
    background: rgba(0,255,136,0.06);
    box-shadow: 0 0 10px rgba(0,255,136,0.1);
  }

  /* ══════════════════════
     MAIN revealed page
  ══════════════════════ */
  #main {
    width: min(700px, 98vw);
    height: 400px;
    background: #050208;
    border: 1px solid rgba(0,255,136,0.12);
    border-radius: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    opacity: 0;
    transition: opacity 0.8s ease;
    position: absolute;
  }
  #main.show { opacity: 1; }

  .main-label {
    font-family: 'Share Tech Mono', monospace;
    font-size: 10px; letter-spacing: 0.4em;
    color: rgba(0,255,136,0.35); text-transform: uppercase;
  }
  .main-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(22px, 4vw, 38px); font-weight: 900;
    background: linear-gradient(135deg, #e0fff0, #00ff88, #00d4ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    letter-spacing: 0.05em;
  }
  .main-sub {
    font-family: 'Share Tech Mono', monospace;
    font-size: 11px; color: rgba(0,255,136,0.35); letter-spacing: 0.1em;
    margin-bottom: 8px;
  }
  .replay-btn {
    font-family: 'Orbitron', monospace;
    font-size: 10px; font-weight: 700; letter-spacing: 0.2em;
    padding: 9px 24px; border-radius: 4px;
    background: transparent;
    border: 1px solid rgba(0,255,136,0.35);
    color: #00ff88; cursor: pointer; transition: all 0.3s;
  }
  .replay-btn:hover {
    background: rgba(0,255,136,0.07);
    box-shadow: 0 0 20px rgba(0,255,136,0.15);
  }

  /* Wrap both in same spot */
  .stage {
    position: relative;
    width: min(700px, 98vw);
    height: 400px;
    display: flex; align-items: center; justify-content: center;
  }
 // ── Particles ──
  const canvas = document.getElementById('particles');
  const ctx    = canvas.getContext('2d');
  const box    = document.getElementById('loader');

  function resizeCanvas() {
    canvas.width  = box.offsetWidth;
    canvas.height = box.offsetHeight;
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  const pts = Array.from({length: 70}, () => ({
    x: Math.random() * 700, y: Math.random() * 400,
    vx: (Math.random()-.5)*.4, vy: (Math.random()-.5)*.4,
    r: Math.random()*1+0.3,
    p: Math.random()*Math.PI*2
  }));

  function drawPts() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    pts.forEach(p => {
      p.x+=p.vx; p.y+=p.vy; p.p+=0.02;
      if(p.x<0)p.x=canvas.width; if(p.x>canvas.width)p.x=0;
      if(p.y<0)p.y=canvas.height; if(p.y>canvas.height)p.y=0;
      const a = 0.15 + 0.12*Math.sin(p.p);
      ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
      ctx.fillStyle=`rgba(0,255,136,${a})`; ctx.fill();
    });
    for(let i=0;i<pts.length;i++) for(let j=i+1;j<pts.length;j++){
      const dx=pts[i].x-pts[j].x, dy=pts[i].y-pts[j].y;
      const d=Math.sqrt(dx*dx+dy*dy);
      if(d<80){ ctx.beginPath(); ctx.moveTo(pts[i].x,pts[i].y); ctx.lineTo(pts[j].x,pts[j].y);
        ctx.strokeStyle=`rgba(0,255,136,${0.05*(1-d/80)})`; ctx.lineWidth=0.5; ctx.stroke(); }
    }
    requestAnimationFrame(drawPts);
  }
  drawPts();

  // ── Loader logic ──
  const terminal = document.getElementById('terminal');
  const barFill  = document.getElementById('barFill');
  const pctEl    = document.getElementById('pct');
  const loader   = document.getElementById('loader');
  const mainEl   = document.getElementById('main');

  function setProgress(p) {
    barFill.style.width = p+'%';
    pctEl.textContent   = p+'%';
  }

  function addLog(text) {
    const line = document.createElement('div');
    line.className = 'log-line running';
    line.textContent = text;
    terminal.appendChild(line);
    if(terminal.children.length > 3) terminal.children[0].remove();
    void line.offsetWidth;
    line.classList.add('show');
    setTimeout(()=>{ line.classList.remove('running'); line.classList.add('done'); }, 300);
  }

  function animProgress(from, to, ms) {
    const start = performance.now();
    return new Promise(res => {
      function step(now){
        const t = Math.min((now-start)/ms, 1);
        const e = 1-Math.pow(1-t,3);
        setProgress(Math.round(from+(to-from)*e));
        t<1 ? requestAnimationFrame(step) : res();
      }
      requestAnimationFrame(step);
    });
  }

  const wait = ms => new Promise(r=>setTimeout(r,ms));

  async function runLoader() {
    terminal.innerHTML='';
    setProgress(0);
    document.querySelectorAll('.chip').forEach(c=>c.classList.remove('active'));
    loader.style.opacity='1'; loader.style.visibility='visible';
    mainEl.style.display='none'; mainEl.classList.remove('show');

    await wait(300);
    addLog('Booting kernel...');
    await animProgress(0,18,500);

    await wait(200);
    addLog('Loading auth tokens');
    await animProgress(18,38,650);
    document.getElementById('chip-0').classList.add('active');

    await wait(200);
    addLog('Fetching assets 100%');
    await animProgress(38,62,800);
    document.getElementById('chip-1').classList.add('active');

    await wait(200);
    addLog('Compiling runtime modules');
    await animProgress(62,80,600);
    document.getElementById('chip-2').classList.add('active');

    await wait(200);
    addLog('Secure connection established');
    await animProgress(80,93,500);
    document.getElementById('chip-3').classList.add('active');

    await wait(150);
    addLog('All systems nominal ✓');
    await animProgress(93,100,400);
    document.getElementById('chip-4').classList.add('active');

    await wait(500);
    loader.style.opacity='0'; loader.style.visibility='hidden';

    setTimeout(()=>{
      mainEl.style.display='flex';
      void mainEl.offsetWidth;
      mainEl.classList.add('show');
    }, 400);
  }

  function replayLoader() {
    mainEl.classList.remove('show');
    setTimeout(runLoader, 500);
  }

  runLoader();
Categories

Loading Screen

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
