Simple loading component showing " ..", ". .", ".. ", repeated every second

LoadingThreeDots.svelte

<script>
  // Note: This is a waste of JavaScipt resources, and will not update nicely
  // if you are running heavy computations. Better to use an SVG or CSS.
  
  import { onMount } from "svelte"

  const fullString = "..."
  let currentString = ""

  onMount(() => {
    let i = 0
    const numberOfSteps = fullString.length
    const interval = setInterval(() => {
      i = (i + 1) % numberOfSteps
      currentString = fullString.substring(0, i) + "&nbsp;" + fullString.substring(i + 1)
    }, 1000/numberOfSteps)
    return () => {
      clearInterval(interval)
    }
  })
</script>

<span class="loading">{@html currentString}</span>

<style>
  .loading {
    font-family: monospace;
  }
</style>