# Loader

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

# Most common usage scenario


<template>
  <SfLoader :loading="isLoading">
    <SfImage src="largeImage.jpg" />
  </SfLoader>
</template>
<script>
import { SfLoader, SfImage } 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

  • .sf-loader--top

# SCSS variables

$loader__spinner-color: $c-accent-primary !default;
$loader__overlay-color: white !default;

You can override SCSS variable values bound to this component in sfui.scss in the root of your project.

# Partials

If you want to customize this component even more you can use its partials for limitless customization.

<template lang="html" src="@storefront-ui/vue/src/components/atoms/SfLoader/SfLoader.html"></template>
<script src="@storefront-ui/vue/src/components/atoms/SfLoader/SfLoader.js"></script>
<style lang="scss">
@import "~@storefront-ui/shared/styles/components/SfLoader.scss";
</style>

You can read about using component partials here

# Play with this component

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