LoadSVG

The LoadSVG component is a simple and customizable SVG-based loading spinner. It can be easily integrated into any React application and customized according to the needs of the user.

To use react-loadsvg in your project, you need to install it first using npm or yarn.

npm install react-loadsvg

or

yarn add react-loadsvg

Once you have installed the react-loadsvg package, you can use the LoadSVG component in your React application. Here's an example of how to use it:

import LoadSVG from 'react-loadsvg';

function App() {
  return (
    <div>
      <LoadSVG size={50} color="blue" />
    </div>
  );
}

In the example above, the LoadSVG component is imported from the react-loadsvg package and rendered inside a div element. The size and color props are passed to the component to customize its appearance.

The LoadSVG component accepts the following props:

Here are some examples of how to use the LoadSVG component with different props:

Example 1: Changing the size and color

<LoadSVG size={30} color="red" />

Example 2: Disabling the background stroke

<LoadSVG backStroke={0} />

Example 3: Changing the line cap style

<LoadSVG lineCap="square" />

Example 4: Customizing the animation duration

<LoadSVG duration={4000} />

The LoadSVG component can be styled using CSS, just like any other React component. The class name of the SVG element is loadSVG.

.loadSVG {
  /* CSS styles here */
}

Contributions to the react-loadsvg package are welcome and encouraged! If you find a bug or want to suggest an improvement, feel free to open an issue or submit a pull request on the GitHub repository.

The react-loadsvg package is licensed under the MIT License.