Blog

<style>
  .live_visitors {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 13px;
  }
  .live_visitors::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    margin-left: -14px;
    top: 0.6em;
    border-radius: 100%;
    background: currentColor;
    color: rgba(33, 182, 70, 1);
    box-shadow: 0 0 0 0 rgba(33, 182, 70, 1);
    animation: pulse-blue 2s infinite;
  }
  @keyframes pulse-blue {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(33, 182, 70, 0.7);
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px rgba(33, 182, 70, 0);
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 rgba(33, 182, 70, 0);
    }
  }
</style>
<p class="live_visitors no-js-hidden">
  <span id="visitors_count"></span> People are viewing right now.
</p>

<script>
  let max_visitors = 600;
  let min_visitors = 500;
  let delay = 4000;
  let visitors_count = Math.floor(Math.random() * (max_visitors - min_visitors + 1) + min_visitors);
  document.getElementById("visitors_count").innerHTML = visitors_count;
  setInterval(function() {
    visitors_count = Math.floor(Math.random() * (max_visitors - min_visitors + 1) + min_visitors);
    document.getElementById("visitors_count").innerHTML = visitors_count;
  }, delay);
</script>

{% render 'live-visitors' %}