Infinite Scroll Sentinel

<nav aria-label="Pagination" class="nuda-pg2-infinite">
  <div class="nuda-pg2-infinite__list" aria-hidden="true">
    <span class="nuda-pg2-infinite__item"></span>
    <span class="nuda-pg2-infinite__item"></span>
    <span class="nuda-pg2-infinite__item"></span>
  </div>
  <div class="nuda-pg2-infinite__sentinel" role="status" aria-live="polite">
    <span class="nuda-pg2-infinite__spinner" aria-hidden="true"></span>
    <span class="nuda-pg2-infinite__label">Loading more…</span>
  </div>
</nav>

.nuda-pg2-infinite {
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.nuda-pg2-infinite__list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.nuda-pg2-infinite__item {
  display: block;
  height: 14px;
  border-radius: 5px;
  background: #1c1c1c;
}

.nuda-pg2-infinite__item:nth-child(2) {
  width: 85%;
}

.nuda-pg2-infinite__item:nth-child(3) {
  width: 70%;
}

.nuda-pg2-infinite__sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem;
  min-height: 44px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #777;
  font-size: .75rem;
}

.nuda-pg2-infinite__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: #e4ff54;
  animation: _nuda-pg2infinitespin .7s linear infinite;
}

.nuda-pg2-infinite__label {
  font-variant-numeric: tabular-nums;
}

@keyframes _nuda-pg2infinitespin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-pg2-infinite__spinner {
    animation: none !important;
  }
}