Loader

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

Animated loader icon to easily show a load state of the project/component. A handy way to keep this small animation consistent accros the projects.

Getting started

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

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

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

Guidelines

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

API

Properties

type

Type of loader to render. String values map to built-in CSS animations; passing a Vue component renders it inside the loader wrapper with the --custom class applied.

Values: 'spinner' | 'dots' | Vue Component (Object)

Default: 'spinner'