BreezeUI
  • English

    • Loading

    Component Features

    • ⏳ 5 Visual Variants: Supports spinner, ring, bar, wave, dots loading indicators.
    • 📏 4 Sizes: Supports sm, md, lg, xl sizes.
    • 🌈 Color Control: Supports color prop to control indicator color.
    • 📝 Text Loading: Supports displaying text alongside the loading indicator.
    • 🖥️ Fullscreen Mode: Supports fullscreen overlay loading.
    • ❌ Disabled: Supports disabled prop.
    • 🎨 Theme Customization: Based on BrConfigProvider for global theming and TailwindCSS local overrides.

    Basic Usage

    The simplest loading indicator.

    <script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex items-center space-x-4">
    <BrLoading />
    <BrLoading variant="dots" />
    <BrLoading variant="ring" />
    <BrLoading variant="pulse" />
  </div>
</template>

    Variants and Sizes

    Supports five variants: spin, ring, pulse, dots, bar, and four sizes: sm, md, lg, xl.

    <script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <div class="flex items-center gap-4">
      <BrLoading size="sm" />
      <BrLoading size="md" />
      <BrLoading size="lg" />
      <BrLoading size="xl" />
    </div>
    <div class="flex items-center gap-4">
      <BrLoading variant="dots" size="sm" />
      <BrLoading variant="dots" size="md" />
      <BrLoading variant="dots" size="lg" />
      <BrLoading variant="dots" size="xl" />
    </div>
    <div class="w-full max-w-xs space-y-2">
      <BrLoading variant="bar" :progress="30" size="sm" />
      <BrLoading variant="bar" :progress="60" size="md" />
    </div>
  </div>
</template>

    Inline and Text

    Use the inline prop to display the loader inline with text, and use the text prop to add a loading message.

    <script setup>
import { BrLoading, BrButton } from '@breezeui/vue';
</script>

<template>
  <div class="flex flex-col gap-4">
    <BrButton disabled>
      <BrLoading variant="spin" size="sm" inline class="mr-2" />
      Saving...
    </BrButton>

    <div class="flex items-center gap-2 text-sm text-muted-foreground">
      <BrLoading variant="dots" size="sm" inline />
      <span>Data is loading...</span>
    </div>

    <BrLoading variant="spin" text="Loading data..." />

    <BrLoading variant="bar" :progress="45" text="Uploading" class="w-64" />
  </div>
</template>

    Fullscreen

    Use the fullscreen prop to cover the entire screen, commonly used for page transitions or blocking operations.

    <script setup>
import { ref } from 'vue';
import { BrLoading, BrButton } from '@breezeui/vue';

const isLoading = ref(false);
const toggleLoading = () => {
  isLoading.value = true;
  setTimeout(() => (isLoading.value = false), 3000);
};
</script>

<template>
  <BrButton @click="toggleLoading">Show Fullscreen Loading</BrButton>
  <BrLoading v-if="isLoading" fullscreen text="Preparing..." variant="dots" size="lg" />
</template>

    Theming

    Customize globally via BrConfigProvider or locally via CSS variables.

    <script setup>
import { BrConfigProvider, BrLoading } from '@breezeui/vue';

const theme = {
  primary: '#10B981', // Emerald 500
  zLoading: 100,
  transitionDuration: '500ms', // Slower animation
};
</script>

<template>
  <BrConfigProvider :theme="theme">
    <div class="flex items-center gap-4">
      <BrLoading variant="spin" size="lg" />
      <BrLoading variant="ring" size="lg" />
      <BrLoading variant="dots" size="lg" />
      <BrLoading variant="bar" :progress="70" class="w-32" />
    </div>
  </BrConfigProvider>
</template>

    Custom Color and Size

    Pass color and size directly via props.

    <script setup>
import { BrLoading } from '@breezeui/vue';
</script>

<template>
  <div class="flex items-center gap-4">
    <BrLoading color="#E11D48" />
    <BrLoading color="#8B5CF6" variant="dots" />
    <BrLoading :custom-size="40" variant="ring" />
    <BrLoading :speed="2" text="Fast!" />
  </div>
</template>

    API

    BrLoading

    PropTypeDefaultDescription
    variant'spin' | 'ring' | 'pulse' | 'dots' | 'bar''spin'Loading indicator variant
    size'sm' | 'md' | 'lg' | 'xl''md'Size
    colorstring-Custom color
    customSizestring | number-Custom size (width/height)
    fullscreenbooleanfalseWhether to show fullscreen mask
    inlinebooleanfalseWhether to display inline
    textstring-Loading text
    progressnumber-Progress value (0-100), only for bar variant or with text
    disabledbooleanfalseWhether disabled (dimmed/unclickable)
    speednumber1Animation speed multiplier

    BrLoadingSpinner

    PropTypeDefaultDescription
    variant'spin' | 'ring' | 'pulse''spin'Animation variant
    size'sm' | 'md' | 'lg' | 'xl''md'Size
    colorstring-Color
    customSizestring | number-Custom size
    speednumber1Speed

    BrLoadingDots

    PropTypeDefaultDescription
    size'sm' | 'md' | 'lg' | 'xl''md'Size
    colorstring-Color
    customSizestring | number-Custom size
    speednumber1Speed

    BrLoadingBar

    PropTypeDefaultDescription
    size'sm' | 'md' | 'lg' | 'xl''md'Size
    colorstring-Color
    progressnumber-Progress value
    speednumber1Speed