Skip to main content

🚀 Usage

Use the following steps to use the Nx Vue SVG Loaders in your Vue project.

Import​

Import selected Nx{SELECTED}Loader component into your component or module and then use with <Nx{SELECTED}Loader> tag.

app.vue
<template>
  <div>
    <NxOvalLoader :isLoading="true" :size="40" />
  </div>
</template>

<script>
import { NxOvalLoader } from '@ngeenx/nx-vue-svg-loaders';

export default {
  components: {
    NxOvalLoader,
  },

  data() {
    return {
      isLoading: true,
    };
  },
};
</script>

<style scoped lang="scss">
    // ...
</style>

Coloring​

You can set custom color to the loader by passing style.color prop to the loader component or any parent element. SVG loader will inherit the color from the parent element with currentColor value.

app.vue
<template>
  <div>
    <NxOvalLoader :isLoading="isLoading" :size="40" :style="{ color: 'orange' }" />

    <!-- or -->

    <NxOvalLoader :isLoading="isLoading" :size="40" class="text-orange-500" />
  </div>
</template>

Alignment​

You can set horizontal alignment to the loader by passing isCentered prop to the loader component.

First you need to import the styles in your styles.scss or App.vue file (also see source code of the styles.css).

App.vue
<template>
  <div>
    <NxOvalLoader :isLoading="isLoading" :size="40" :isCentered="true"/>
  </div>
</template>

<style scoped>
@import "@ngeenx/nx-vue-svg-loaders/styles.css";
</style>