Offline State

<div class="nuda-err-offline">
  <div class="nuda-err-offline__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <line x1="1" y1="1" x2="23" y2="23" />
      <path d="M16.72 11.06A10.94 10.94 0 0119 12.55" />
      <path d="M5 12.55a10.94 10.94 0 015.17-2.39" />
      <path d="M10.71 5.05A16 16 0 0122.56 9" />
      <path d="M1.42 9a15.91 15.91 0 014.7-2.88" />
      <path d="M8.53 16.11a6 6 0 016.95 0" />
      <line x1="12" y1="20" x2="12.01" y2="20" />
    </svg>
  </div>
  <p class="nuda-err-offline__msg">No connection</p>
  <p class="nuda-err-offline__sub">Check your internet connection and try again.</p>
  <div class="nuda-err-offline__dots">
    <span class="nuda-err-offline__dot"></span>
    <span class="nuda-err-offline__dot"></span>
    <span class="nuda-err-offline__dot"></span>
  </div>
</div>

.nuda-err-offline {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  background: #1a1a1a;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  text-align: center;
  width: 100%;
  max-width: 260px;
}

.nuda-err-offline__icon {
  width: 46px;
  height: 46px;
  color: #777;
  margin-bottom: 12px;
}

.nuda-err-offline__icon svg {
  width: 100%;
  height: 100%;
}

.nuda-err-offline__msg {
  color: #cfcfcf;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}

.nuda-err-offline__sub {
  color: #555;
  font-size: 10px;
  line-height: 1.5;
  margin: 0 0 16px;
  max-width: 190px;
}

.nuda-err-offline__dots {
  display: flex;
  gap: 5px;
  align-items: center;
}

.nuda-err-offline__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #333;
  animation: _nuda-erroffl-blink 1.4s ease-in-out infinite;
}

.nuda-err-offline__dot:nth-child(2) {
  animation-delay: .25s;
}

.nuda-err-offline__dot:nth-child(3) {
  animation-delay: .5s;
}

@keyframes _nuda-erroffl-blink {
  0%,80%,100% {
    background: #333;
  }
  40% {
    background: #666;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-err-offline__dot {
    animation: none;
    background: #444;
  }
}