Skip to content

eevajonnapanula/asteroid-loading-spinner

Repository files navigation

Asteroid Loading Spinner

This is React component which has a small, simple loading indicator displaying a moving asteroid. It is created with a svg and a little bit of css animation magic.

In order to use this package, you need to install react and react-dom to your project.

Installation

Install the package:

npm install --save asteroid-loading-spinner

then, import the package to the desired file:

import AsteroidLoadingSpinner from 'asteroid-loading-spinner'

Props v2

Name Optional Description Default value
asteroidColor ✔️ Color of the asteroid "#ea7317"
lineColor ✔️ Color of the lines  "currentColor"

Props v1

Name Optional Description Default value
circleClassName ✔️ Class name to override the colors of the asteroid (the circles) "circle"
lineClassName ✔️ Class name to override the colors for the lines that indicate that the asteroid is moving  "line"

Example Usage

import AsteroidLoadingSpinner from 'asteroid-loading-spinner'

const App = () => (
  <AsteroidLoadingSpinner circleClassName="class-name" />
)