Geometric loader

Hashtag

Bold hashtag mark

VHashtagLoaderhashtag

<VHashtagLoader :size="48" color="#6d3ff2" :duration="1200" label="Loading content" />

Controls

#6d3ff2

Sets the accessible name of the status region. The preview also shows the text so you can read the state you describe.

Implementation

vue
<script setup lang="ts">
import { VHashtagLoader } from "veload";
import "veload/style.css";
</script>

<template>
  <VHashtagLoader :size="48" color="#6d3ff2" :duration="1200" label="Loading content" />
</template>

Props

VHashtagLoader props
PropTypeDefaultDescription
colorstring"currentColor"Primary colour of the loader. Accepts any CSS colour value, including `currentColor`.
sizenumber40Diameter or height of the loader in pixels. Values below 12 are clamped to 12.
durationnumber1000Duration of one animation cycle in milliseconds. Values below 100 are clamped to 100.
countnumber4Accepted by the shared API, but ignored by this fixed treatment. No count control is shown.
labelstring"Loading"Accessible name announced by the status region. An empty label makes the loader decorative.
decorativebooleanfalseHides the loader from assistive technology. Use it when an ancestor already announces the loading state.

About this treatment

  • Two crossing bars form a hashtag shape.
  • Uses pseudo-elements, so it adds no extra markup.
  • A distinctive brand-friendly mark for social surfaces.