Loading animation

<"attr">class="tag">div "attr">class="main-container">
  <"attr">class="tag">div "attr">class="loader">
    <"attr">class="tag">svg
      "attr">viewBox="0 0 900 900"
      "attr">xmlns="http://www.w3.org/2000/svg"
      "attr">preserveAspectRatio="none"
    >
      <"attr">class="tag">defs>
        <"attr">class="tag">linearGradient
          "attr">id="traceGradient1"
          "attr">x1="250"
          "attr">y1="120"
          "attr">x2="100"
          "attr">y2="200"
          "attr">gradientUnits="userSpaceOnUse"
        >
          <"attr">class="tag">stop "attr">offset="0%" "attr">stop-color="#00ccff" "attr">stop-opacity="1"></"attr">class="tag">stop>
          <"attr">class="tag">stop "attr">offset="100%" "attr">stop-color="#00ccff" "attr">stop-opacity="0.5"></"attr">class="tag">stop>
        </"attr">class="tag">linearGradient>

        <"attr">class="tag">linearGradient
          "attr">id="traceGradient2"
          "attr">x1="650"
          "attr">y1="120"
          "attr">x2="800"
          "attr">y2="300"
          "attr">gradientUnits="userSpaceOnUse"
        >
          <"attr">class="tag">stop "attr">offset="0%" "attr">stop-color="#00ccff" "attr">stop-opacity="1"></"attr">class="tag">stop>
          <"attr">class="tag">stop "attr">offset="100%" "attr">stop-color="#00ccff" "attr">stop-opacity="0.5"></"attr">class="tag">stop>
        </"attr">class="tag">linearGradient>

        <"attr">class="tag">linearGradient
          "attr">id="traceGradient3"
          "attr">x1="250"
          "attr">y1="380"
          "attr">x2="400"
          "attr">y2="400"
          "attr">gradientUnits="userSpaceOnUse"
        >
          <"attr">class="tag">stop "attr">offset="0%" "attr">stop-color="#00ccff" "attr">stop-opacity="1"></"attr">class="tag">stop>
          <"attr">class="tag">stop "attr">offset="100%" "attr">stop-color="#00ccff" "attr">stop-opacity="0.5"></"attr">class="tag">stop>
        </"attr">class="tag">linearGradient>

        <"attr">class="tag">linearGradient
          "attr">id="traceGradient4"
          "attr">x1="650"
          "attr">y1="120"
          "attr">x2="500"
          "attr">y2="100"
          "attr">gradientUnits="userSpaceOnUse"
        >
          <"attr">class="tag">stop "attr">offset="0%" "attr">stop-color="#00ccff" "attr">stop-opacity="1"></"attr">class="tag">stop>
          <"attr">class="tag">stop "attr">offset="100%" "attr">stop-color="#00ccff" "attr">stop-opacity="0.5"></"attr">class="tag">stop>
        </"attr">class="tag">linearGradient>
      </"attr">class="tag">defs>

      <"attr">class="tag">g "attr">id="grid">
        <"attr">class="tag">g>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="0" "attr">x2="0" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="100" "attr">y1="0" "attr">x2="100" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="200" "attr">y1="0" "attr">x2="200" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="300" "attr">y1="0" "attr">x2="300" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="400" "attr">y1="0" "attr">x2="400" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="500" "attr">y1="0" "attr">x2="500" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="600" "attr">y1="0" "attr">x2="600" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="700" "attr">y1="0" "attr">x2="700" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="800" "attr">y1="0" "attr">x2="800" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="900" "attr">y1="0" "attr">x2="900" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1000" "attr">y1="0" "attr">x2="1000" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1100" "attr">y1="0" "attr">x2="1100" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1200" "attr">y1="0" "attr">x2="1200" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1300" "attr">y1="0" "attr">x2="1300" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1400" "attr">y1="0" "attr">x2="1400" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1500" "attr">y1="0" "attr">x2="1500" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="1600" "attr">y1="0" "attr">x2="1600" "attr">y2="100%" "attr">class="grid-line"></"attr">class="tag">line>
        </"attr">class="tag">g>

        <"attr">class="tag">g>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="100" "attr">x2="100%" "attr">y2="100" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="200" "attr">x2="100%" "attr">y2="200" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="300" "attr">x2="100%" "attr">y2="300" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="400" "attr">x2="100%" "attr">y2="400" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="500" "attr">x2="100%" "attr">y2="500" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="600" "attr">x2="100%" "attr">y2="600" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="700" "attr">x2="100%" "attr">y2="700" "attr">class="grid-line"></"attr">class="tag">line>
          <"attr">class="tag">line "attr">x1="0" "attr">y1="800" "attr">x2="100%" "attr">y2="800" "attr">class="grid-line"></"attr">class="tag">line>
        </"attr">class="tag">g>
      </"attr">class="tag">g>

      <"attr">class="tag">g "attr">id="browser" "attr">transform="translate(0, 200)">
        <"attr">class="tag">rect
          "attr">x="250"
          "attr">y="120"
          "attr">width="400"
          "attr">height="260"
          "attr">rx="8"
          "attr">ry="8"
          "attr">class="browser-frame"
        ></"attr">class="tag">rect>

        <"attr">class="tag">rect
          "attr">x="250"
          "attr">y="120"
          "attr">width="400"
          "attr">height="30"
          "attr">rx="8"
          "attr">ry="8"
          "attr">class="browser-top"
        ></"attr">class="tag">rect>

        <"attr">class="tag">text "attr">x="294" "attr">y="140" "attr">text-anchor="middle" "attr">class="loading-text">
          Loading...
        </"attr">class="tag">text>

        <"attr">class="tag">rect "attr">x="270" "attr">y="160" "attr">width="360" "attr">height="20" "attr">class="skeleton"></"attr">class="tag">rect>
        <"attr">class="tag">rect "attr">x="270" "attr">y="190" "attr">width="200" "attr">height="15" "attr">class="skeleton"></"attr">class="tag">rect>
        <"attr">class="tag">rect "attr">x="270" "attr">y="215" "attr">width="300" "attr">height="15" "attr">class="skeleton"></"attr">class="tag">rect>
        <"attr">class="tag">rect "attr">x="270" "attr">y="240" "attr">width="360" "attr">height="90" "attr">class="skeleton"></"attr">class="tag">rect>
        <"attr">class="tag">rect "attr">x="270" "attr">y="340" "attr">width="180" "attr">height="20" "attr">class="skeleton"></"attr">class="tag">rect>
      </"attr">class="tag">g>

      <"attr">class="tag">g "attr">id="traces" "attr">transform="translate(0, 200)">
        <"attr">class="tag">path "attr">d="M100 300 H250 V120" "attr">class="trace-flow"></"attr">class="tag">path>
        <"attr">class="tag">path "attr">d="M800 200 H650 V380" "attr">class="trace-flow"></"attr">class="tag">path>
        <"attr">class="tag">path "attr">d="M400 520 V380 H250" "attr">class="trace-flow"></"attr">class="tag">path>
        <"attr">class="tag">path "attr">d="M500 50 V120 H650" "attr">class="trace-flow"></"attr">class="tag">path>
      </"attr">class="tag">g>
    </"attr">class="tag">svg>
  </"attr">class="tag">div>
</"attr">class="tag">div>

.main-container { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; overflow: hidden;
}

.loader { width: 100%; height: 100%;
}

#browser { overflow: hidden;
}

.grid-line { stroke: #222; stroke-width: 0.5;
}

.browser-frame { fill: #111; stroke: #666; stroke-width: 1; filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.9));
}

.browser-top { fill: #1a1a1a;
}

.loading-text { font-family: Haettenschweiler, sans-serif; font-size: 14px; fill: #e4e4e4;
}

.skeleton { fill: #2d2d2d; rx: 4; ry: 4; animation: pulse 1.8s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.02));
}

@keyframes pulse {
  0% { fill: #2d2d2d;
  }
  50% { fill: #505050;
  }
  100% { fill: #2d2d2d;
  }
}

.trace-flow { stroke-width: 1; fill: none; stroke-dasharray: 120 600; stroke-dashoffset: 720; animation: flow 5s linear infinite; opacity: 0.95; stroke-linejoin: round; filter: drop-shadow(0 0 8px currentColor) blur(0.5px); color: #00ccff;
}
.trace-flow:nth-child(1) { stroke: url(#traceGradient1);
}
.trace-flow:nth-child(2) { stroke: url(#traceGradient2);
}
.trace-flow:nth-child(3) { stroke: url(#traceGradient3);
}
.trace-flow:nth-child(4) { stroke: url(#traceGradient4);
}

@keyframes flow {
  from { stroke-dashoffset: 720;
  }
  to { stroke-dashoffset: 0;
  }
}