stufflog2/svelte-ui/src/components/TimeProgress.svelte

<script lang="ts">
  import EveryMinute from "./EveryMinute.svelte";
  import Progress from "./Progress.svelte";

  export let startTime: string | Date;
  export let endTime: string | Date;

  let msLength: number;
  let msElapsed: number;
  let now = Date.now();

  $: {
    const start = (startTime instanceof Date) ? startTime.getTime() : Date.parse(startTime)
    const length = ((endTime instanceof Date) ? endTime.getTime() : Date.parse(endTime)) - start;

    msLength = length;
    msElapsed = 0;

    if (now > start) {
      if (now > start + length) {
        msElapsed = length;
      } else {
        msElapsed = Math.round(now - start);
      }
    }
  }
</script>

<EveryMinute bind:now={now} />
<Progress thinner gray count={msElapsed} target={msLength} titleTime />