Skip to main content

🚀 Usage

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

Import​

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

App.tsx
import { useState } from "react";

import { NxOvalLoader } from "@ngeenx/nx-react-svg-loaders";

const App = (props: IAppProps) => {
  // ...

  const [isLoading, setIsLoading] = useState(true);

  return (
    <>
      {/* ... */}

      <NxOvalLoader isLoading={isLoading} size={40} />

      {/* ... */}
    </>
  );
};

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.tsx
import { NxOvalLoader } from "@ngeenx/nx-react-svg-loaders";

const App = (props: IAppProps) => {
  // ...

  const [isLoading, setIsLoading] = useState(true);

  return (
    <>
      {/* ... */}

      <NxOvalLoader isLoading={isLoading} size={40} style={{ color: 'orange' }}/>

      {/* or */}

      <NxOvalLoader isLoading={isLoading} size={40} className="text-orange-500"/>

      {/* ... */}
    </div>
  );
};

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.svelte file (also see source code of the styles.css).

App.tsx
...

import "@ngeenx/nx-react-svg-loaders/styles.css";

...

<NxOvalLoader isLoading={isLoading} size={40} isCentered={true}/>
...