Accessibility: Full

Translations: Not Needed

Try in Cursor

Loading Bar

Loading Bar component for displaying loading progress at the top of the page or within a container

Basic Usage

Vue

<template>
  <HLLoadingBar ref="loadingBarRef">
    <div style="padding: 20px;">
      <HLButton color="blue" variant="primary" @click="handleStart">
        Start Loading
      </HLButton>
      <HLButton @click="handleFinish">
        Finish Loading
      </HLButton>
      <HLButton color="red" variant="primary" @click="handleError">
        Error
      </HLButton>
    </div>
  </HLLoadingBar>
</template>

<script setup lang="ts">
  import { HLLoadingBar, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const loadingBarRef = ref(null)

  const handleStart = () => {
    loadingBarRef.value?.startLoadBar()
  }

  const handleFinish = () => {
    loadingBarRef.value?.stopLoadBar()
  }

  const handleError = () => {
    loadingBarRef.value?.errorLoadBar()
  }
</script>

Custom Position and Styling

You can mount the loading bar to a specific container and apply custom styles.

Vue

<template>
  <div ref="customBoxRef" style="height: 200px; width: 100%; border: 2px solid #e5e7eb; position: relative;">
    <HLLoadingBar 
      ref="customLoadingBarRef"
      :to="customBoxRef"
      :containerStyle="{ position: 'absolute' }"
    >
    </HLLoadingBar>
  </div>
  <div>
    <HLButton color="blue" variant="primary" @click="handleCustomStart">
      Start Loading
    </HLButton>
    <HLButton @click="handleCustomFinish">
      Finish Loading
    </HLButton>
    <HLButton color="red" variant="primary" @click="handleCustomError">
      Error
    </HLButton>
  </div>
</template>

<script setup lang="ts">
  import { HLLoadingBar, HLButton } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const customBoxRef = ref(null)
  const customLoadingBarRef = ref(null)

  const handleCustomStart = () => {
    customLoadingBarRef.value?.startLoadBar()
  }

  const handleCustomFinish = () => {
    customLoadingBarRef.value?.stopLoadBar()
  }

  const handleCustomError = () => {
    customLoadingBarRef.value?.errorLoadBar()
  }
</script>

Custom Styling

Customize the appearance of the loading bar using the loadingBarStyle prop.

Vue

<template>
  <HLLoadingBar 
    ref="loadingBarRef"
    :loadingBarStyle="{
      loading: { backgroundColor: '#3b82f6', height: '4px' },
      error: { backgroundColor: '#ef4444', height: '4px' }
    }"
  >
    <div>Your content here</div>
  </HLLoadingBar>
</template>

<script setup lang="ts">
  import { HLLoadingBar } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const loadingBarRef = ref(null)
</script>

Accessibility

• The loading bar provides visual feedback for loading states
• Use in conjunction with aria-busy or aria-live regions to announce loading states to screen readers
• Consider adding descriptive text or announcements for users who may not perceive the visual loading indicator

Imports

import { HLLoadingBar } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
containerClass	string | undefined	undefined	Class name for the loading bar container
containerStyle	string | CSSProperties | undefined	undefined	Style for the loading bar container
loadingBarStyle	LoadingBarStyle | undefined	undefined	Custom styles for loading and error states
to	string | HTMLElement | false | undefined	undefined	Mount target for the loading bar

Types

LoadingBarStyle

interface LoadingBarStyle {
  loading?: string | CSSProperties | undefined
  error?: string | CSSProperties | undefined
}

Slots

Name	Parameters	Description
default	undefined	Content to wrap with the loading bar provider

Exposed Methods

The component exposes the following methods via template ref:

Name	Parameters	Description
startLoadBar	()	Starts the loading bar animation
stopLoadBar	()	Completes the loading bar animation
errorLoadBar	()	Shows the loading bar in error state

Usage Example

Vue

<template>
  <HLLoadingBar ref="loadingBarRef">
    <button @click="startLoading">Start</button>
  </HLLoadingBar>
</template>

<script setup lang="ts">
  import { HLLoadingBar } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const loadingBarRef = ref(null)

  const startLoading = () => {
    loadingBarRef.value?.startLoadBar()
    
    // Simulate async operation
    setTimeout(() => {
      loadingBarRef.value?.stopLoadBar()
    }, 2000)
  }
</script>