vm-spinner

Displays a loading indicator when the video is buffering.

Visual

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-spinner></vm-spinner>

</vm-ui>

</vm-player>

React

import React from 'react';

import { Player, Ui, Spinner } from '@vime/react';

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<Spinner />

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Spinner />

</Ui>

</Player>

</template>

<script>

import { Player, Ui, Spinner } from '@vime/vue';

export default {

components: {

Player,

Ui,

Spinner,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<Spinner />

</Ui>

</Player>

<script lang="ts">

import { Player, Ui, Spinner } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-spinner />

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-spinner></vm-spinner>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
showWhenMediaLoading	Whether the spinner should be active when the player is booting or media is loading.	boolean	false

Events

Event	Description	Type
vmWillHide	Emitted when the spinner will be hidden.	CustomEvent<void>
vmWillShow	Emitted when the spinner will be shown.	CustomEvent<void>

CSS Custom Properties

Name	Description
--vm-spinner-fill-color	The color of the progress within the track.
--vm-spinner-height	The height of the spinner.
--vm-spinner-spin-duration	How long it takes the spinner to complete a full rotation.
--vm-spinner-spin-timing-func	The animation timing function to use for the spin.
--vm-spinner-thickness	The thickness of the spinner in px.
--vm-spinner-track-color	The color of the track the spinner is rotating in.
--vm-spinner-width	The width of the spinner.
--vm-spinner-z-index	The position in the UI z-axis stack inside the player.

Dependencies

Used by

• vm-default-ui