ovdashboard/ui/src/components/TickerBar.vue

<template>
  <v-footer color="primary" dark>
    <span
      class="text-h6"
      :style="{ 'animation-duration': marqueeDuration }"
      ref="slotWrapper"
    >
      <div v-html="content" />
    </span>
  </v-footer>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class TickerBar extends Vue {
  @Prop({ required: true })
  private readonly content!: string;

  get marqueeDuration(): string {
    // 10 seconds + another second per 7 chars
    let dv = this.content ? Math.round(this.content.length / 7) : 0;
    return 10 + dv + "s";
  }
}
</script>

<style lang="scss" scoped>
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

.v-footer {
  white-space: nowrap;
  overflow: hidden;

  > span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 30s linear infinite;

    &:hover {
      animation-play-state: paused;
    }
  }

  :deep(*) {
    margin: 0 !important;
  }
}
</style>