rey-loading

Cute animated bee loading screen for Vue 3. Fluttering wings, bouncy flight, dotted trail, and fully themeable colors.

Install

npm install rey-loading

Usage

Option A — import per component

<script setup>
import { ref } from 'vue'
import { BeeLoader } from 'rey-loading'

const loading = ref(true)
</script>

<template>
  <BeeLoader v-if="loading" text="Loading" />
  <MainContent v-else />
</template>

Option B — register globally (main.js)

import { createApp } from 'vue'
import ReyLoading from 'rey-loading'
import App from './App.vue'

createApp(App).use(ReyLoading).mount('#app')
// <BeeLoader /> is now available in every component

Styles are injected automatically — no CSS import needed.

Props

| Prop | Type | Default | Description | |--------------|---------|-------------|----------------------------------------------| | text | String | 'Loading' | Label under the bee | | size | Number | 220 | Bee width in px | | fullscreen | Boolean | true | Fixed overlay covering the viewport | | dark | String | '#4E2683' | Outlines, eye, tail, label color | | accent | String | '#F58220' | Stripes, flight trail, bouncing dots | | accentSoft | String | '#CBB9E3' | Back wing tint | | bg | String | '#F9F5FD' | Fullscreen backdrop base color |

Examples

<!-- Inline inside a card or table area -->
<BeeLoader :fullscreen="false" :size="120" text="Fetching bills" />

<!-- Custom brand colors -->
<BeeLoader dark="#1a1a2e" accent="#e94560" />

Respects prefers-reduced-motion.

License

MIT © Rey Mark Egot (REMC Technology Solutions)