vime-spinner

Displays a loading indicator when the video is buffering.

Visual

Usage

HTML

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-spinner></vime-spinner>

</vime-ui>

</vime-player>

React

import React from 'react';

import { VimePlayer, VimeUi, VimeSpinner } from '@vime/react';

function Example() {

return (

<VimePlayer>

{/* ... */}

<VimeUi>

{/* ... */}

<VimeSpinner />

</VimeUi>

</VimePlayer>

);

}

Vue

example.vue

<template>

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeSpinner />

</VimeUi>

</VimePlayer>

</template>

<script>

import { VimePlayer, VimeUi, VimeSpinner } from '@vime/vue';

export default {

components: {

VimePlayer,

VimeUi,

VimeSpinner,

},

};

</script>

Svelte

example.svelte

<VimePlayer>

<!-- ... -->

<VimeUi>

<!-- ... -->

<VimeSpinner />

</VimeUi>

</VimePlayer>

<script lang="ts">

import { VimePlayer, VimeUi, VimeSpinner } from '@vime/svelte';

</script>

Stencil

class Example {

render() {

return (

<vime-player>

{/* ... */}

<vime-ui>

{/* ... */}

<vime-spinner />

</vime-ui>

</vime-player>

);

}

}

Angular

example.html

<vime-player>

<!-- ... -->

<vime-ui>

<!-- ... -->

<vime-spinner></vime-spinner>

</vime-ui>

</vime-player>

Events

Event	Description	Type
vWillHide	Emitted when the spinner will be hidden.	CustomEvent<void>
vWillShow	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

• vime-default-ui

Graph

graph TD;

vime-default-ui --> vime-spinner

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

---

Built with StencilJS