TextLoader

import { TextLoader } from '@bbc/front-end-kit/vue'

A combination of a Loader and a text label to show a load state with context. A handy way to keep this small animation consistent across the projects.

Getting started

<template>
    <div>
        <TextLoader v-if="isLoading" />
        <div v-else>Content loaded</div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { TextLoader } from '@bbc/front-end-kit/vue'

const isLoading = ref(true);
</script>

Preview

Guidelines

• Always extend or wrap the component, provide it with default values, and ensure consistency across the project.

API

Properties

label

Label to show with the loader. The value is reactive — when changed it will update the rendered text.

Values: String

Default: 'Loading...'

loaderType

Type of loader to render. Passed directly to the Loader component's type prop, so only string values are accepted here.

Values: 'spinner' | 'dots'

Default: 'spinner'

Slots

label

Overrides the label text.

Properties

• label: The current label string passed via the label prop.