vm-loading-screen

The view that is displayed while the player is booting or media is loading. By default there are animated dots that are shown below the <slot /> to indicate to the user content is being loaded. The default <slot /> is your opportunity to brand the player with your logo.

Usage

HTML

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-loading-screen>

<!-- Pass in content here such as a logo (optional). -->

</vm-loading-screen>

</vm-ui>

</vm-player>

React

import React from 'react';

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

function Example() {

return (

<Player>

{/* ... */}

<Ui>

{/* ... */}

<LoadingScreen>

{/* Pass in content here such as a logo (optional). */}

</LoadingScreen>

</Ui>

</Player>

);

}

Vue

example.vue

<template>

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<LoadingScreen>

<!-- Pass in content here such as a logo (optional). -->

</LoadingScreen>

</Ui>

</Player>

</template>

<script>

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

export default {

components: {

Player,

Ui,

LoadingScreen,

},

};

</script>

Svelte

example.svelte

<Player>

<!-- ... -->

<Ui>

<!-- ... -->

<LoadingScreen>

<!-- Pass in content here such as a logo (optional). -->

</LoadingScreen>

</Ui>

</Player>

<script lang="ts">

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

</script>

Stencil

class Example {

render() {

return (

<vm-player>

{/* ... */}

<vm-ui>

{/* ... */}

<vm-loading-screen>

{/* Pass in content here such as a logo (optional). */}

</vm-loading-screen>

</vm-ui>

</vm-player>

);

}

}

Angular

example.html

<vm-player>

<!-- ... -->

<vm-ui>

<!-- ... -->

<vm-loading-screen>

<!-- Pass in content here such as a logo (optional). -->

</vm-loading-screen>

</vm-ui>

</vm-player>

Properties

Property	Description	Type	Default
hideDots	Whether the loading dots are hidden or not.	boolean	false

Slots

Slot	Description
	Used to pass in any content to be shown above the animated dots while the player is booting or media is loading. Use this as an opportunity to brand your player, similar to how Netflix shows their logo when content is loading.

CSS Custom Properties

Name	Description
--vm-loading-screen-dot-color	The color of the animated loading dot.
--vm-loading-screen-dot-size	The size (wxh) of the dot in pixels.
--vm-loading-screen-pulse-duration	The length of the pulse animation to complete one cycle.
--vm-loading-screen-z-index	The position in the UI z-axis stack inside the player.

Dependencies

Used by

• vm-default-ui