vime-time-progress

Formats and displays the progression of playback as currentTime (separator) endTime.

Visual

Usage

HTML

<vime-time-progress separator="/" />

React

import React from 'react';

import { VimeTimeProgress } from '@vime/react';

function Example() {

return <VimeTimeProgress separator="/" />;

}

Vue

example.vue

<template>

<VimeTimeProgress separator="/" />

</template>

<script>

import { VimeTimeProgress } from '@vime/vue';

export default {

components: {

VimeTimeProgress,

},

};

</script>

Svelte

example.svelte

<VimeTimeProgress separator="/" />

<script lang="ts">

import { VimeTimeProgress } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return <vime-time-progress separator="/" />;

}

}

Angular

example.html

<vime-time-progress separator="/" />

Properties

Property	Attribute	Description	Type	Default
alwaysShowHours	always-show-hours	Whether the times should always show the hours unit, even if the time is less than 1 hour (eg: 20:35 -> 00:20:35).	boolean	false
separator	separator	The string used to separate the current time and end time.	string	'/'

CSS Custom Properties

Name	Description
--vm-time-color	The color of the text displaying the time.

Dependencies

Used by

• vime-default-controls

Depends on

• vime-current-time
• vime-end-time

Graph

graph TD;

vime-time-progress --> vime-current-time

vime-time-progress --> vime-end-time

vime-current-time --> vime-time

vime-end-time --> vime-time

vime-default-controls --> vime-time-progress

style vime-time-progress fill:#f9f,stroke:#333,stroke-width:4px

---

Built with StencilJS