Custom Loading Indicator Demo

Automatic Loading on Navigation

The loading indicator automatically shows during page navigation. Try clicking the links below to see it in action:

Home Page About Page Reload This Page

Manual Loading Control

You can manually control the loading indicator in your components using the useLoadingIndicator composable.

Loading Indicator Demo

Current Progress: 0%

Loading State: Inactive

Error State: Normal

This demo shows manual control of the loading indicator using the useLoadingIndicator composable.

You can manually control loading states in your components whenever needed.

How It Works

Component Structure

  • MyLoadingIndicator.vue: Base wrapper component
  • MyLoadingIndicator.client.vue: Client-side implementation
  • useLoadingIndicator: Nuxt built-in composable

Implementation Details

  • Uses the Nuxt client/server component pattern
  • Leverages the built-in useLoadingIndicator composable
  • Automatically hooks into page navigation events
  • Provides manual control options for custom loading scenarios

Available Methods

  • start(): Start the loading animation
  • set(value): Set loading progress (0-100)
  • finish(): Complete the loading process
  • clear(): Reset the loading indicator

Available Properties

  • progress: Current progress value (0-100)
  • isLoading: Whether loading is active
  • error: Error state of the loading