Creating a Custom Progress Bar

Since v2.3.0 Notivue exposes a read-only reactive proxy of the isStreamPaused internal which can be used to determine whether the stream is paused or not, and therefore to display a custom progress bar.

You can access the isStreamPaused property using the useNotivue composable.

Example

vue

<script setup lang="ts">
import { useNotivue, type NotivueItem } from 'notivue'

const { isStreamPaused } = useNotivue()

defineProps<{
  item: NotivueItem
}>()
</script>

<template>
  <div class="Wrapper">
    <!-- Content nodes... -->

    <div
      class="Progress"
      :style="{
        animationPlayState: isStreamPaused ? 'paused' : 'running',
        '--duration': `${item.duration}ms`
      }"
    />
  </div>
</template>

<style scoped>
.Wrapper {
  position: relative;
}

@media (prefers-reduced-motion: no-preference) {
  .Progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: red;
    animation: Progress_KF var(--duration) linear forwards;
    transform-origin: left;
  }

  @keyframes Progress_KF {
    0% {
      transform: scaleX(1);
    }
    100% {
      transform: scaleX(0);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .Progress {
    display: none;
  }
}
</style>

Creating a Custom Progress Bar ​

Example ​

Creating a Custom Progress Bar

Example