Personas visitando - liquid

<div class="viewer-count">
  <span class="random-users-ball"></span>
  <span id="viewerNumber">82</span>&nbsp;<b>personas</b>&nbsp;viendo este producto ahora!
</div>

<style>
  .viewer-count {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #202020;
    background-color: #f6f6f6;
    padding: 5px 10px;
    border-radius: 8px;
    width: fit-content;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid #E5E5E5;
    border-bottom: 4px solid #ccc;
  }

  .random-users-ball {
    width: 12px;
    height: 12px;
    background-color: #ff0000;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
    animation: pulse 2s infinite linear;
    margin-right: 5px;
  }

  @keyframes pulse {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
  }
</style>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const viewerElement = document.getElementById('viewerNumber');

    // Valores que simulan los cambios del keyframe original
    const viewerCounts = [95, 85, 90, 92, 98, 79, 81, 89, 97, 80];

    let index = 0;

    function updateViewerCount() {
      viewerElement.textContent = viewerCounts[index];
      index = (index + 1) % viewerCounts.length;

      // Cambia cada 2 segundos como una animación suave
      setTimeout(updateViewerCount, 2000);
    }

    updateViewerCount();
  });
</script>