This is a loading indicator written purely in React that uses SVG and no images. It runs only on web (not React Native).
By default, its size is 20x20. Basic usage is simple: <LoadingIndicator />.
The color of the most solid segment—what we call each spoke of the loading indicator. The color prop is an object with four keys: red, green, blue, and alpha. The first three color components are values between 0 and 255, inclusive. The alpha component is a value between 0 and 1, inclusive.
The number of segments, evenly spaced from each other.
The width of each segment, in logical pixels.
The length of each segment, in logical pixels.
Extra spacing to pad the distance between the center of the loading indicator and each segment, in logical pixels.
The alpha multiplier of the faintest segments. Each segment's color is determined by multiplying the alpha channel of the color prop by a gradually decreasing alpha multiplier that starts at 1 and linearly decreases to the fadeTo prop.
The number of steps between segments from the boldest segment to the faintest segments. If fadeSteps is segments - 1 then only the last segment will be the faintest, multiplied by fadeTo. If fadeSteps is a lower value, then several of the last segments will all have the faintest opacity.