# Loader

Overlay loading spinner, wrapped around elements for indicating long running tasks like image loading

# Most common usage scenario

  <div style="width: 236px; height: 366px; border: 1px solid #f2f2f2;">
    <SfLoader :loading="isLoading">
      <SfImage src="/assets/storybook/SfImage/product-216x326.jpg" />
import { SfLoader } from "@storefront-ui/vue";
import { SfImage } from "@storefront-ui/vue";
import {} from "@storefront-ui/vue";
export default {
  components: {
  data() {
    return {
      isLoading: true,

# Props

  • loading
    • Shows the loader on top of the existing content
    • type: boolean
    • defaultValue: true

# Slots

  • default

    • Slot for the actual content being loaded
  • loader

    • Use this slot to replace the loader

# Events


# CSS modifiers


# CSS custom properties (variables)

  • --loader-overlay-background
  • --loader-spinner-stroke

# Overridden other components CSS variables


You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.