# Loader

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

# Most common usage scenario

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

# 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

None.

# CSS modifiers

None.

# CSS custom properties (variables)

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

# Overridden other components CSS variables

None.

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.