Bolt Loader

Loader with amazing lightning effect

Usage

import { BoltLoader } from "react-awesome-loaders";
export const BoltLoaderComponent = () => {
return (
<>
<BoltLoader
className={"loaderbolt"}
boltColor={"#6366F1"}
backgroundBlurColor={"#E0E7FF"}
/>
</>
);
};

Parameters

Below are the parameters for BoltLoader that you can customize.

OptionDescriptionTypeDefault
classNameclass attribute for loaderStringboltloader
backgroundBackground color of the loaderStringtransparent
boltColorColor of the lightning svg pathString#f2de10
backgroundBlurColorColor of the lightning shadowString#fff9bc
sizeSize of the logoString64px
desktopSizeSize of the logo on desktopString(empty)
mobileSizeSize of the logo on mobileString(empty)

backgroundBlurColor attribute in this loader is blurrified inside the NPM package. So, even if you define very dark color, it will modify it to blurred shade of that color.

size, desktopSize and mobileSize attributes are defined relative to 64px for all loaders and it doesn't mean the actual size would be 64px. It means all the sizes defined will be w.r.t 64px. If you pass 128px then the size doubles. Also, note that if one of the desktopSize and mobileSize is not defined, then it will use the size attribute. Value defined in size attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.

❤️ Inspired from codepen by Aaron Iker