XLVI Loader

Loader with infite shape following effect

Usage

import { XlviLoader } from "react-awesome-loaders";
export const XlviLoaderComponent = () => {
return (
<>
<XlviLoader
boxColors={["#EF4444", "#F59E0B", "#6366F1"]}
desktopSize={"128px"}
mobileSize={"100px"}
/>
</>
);
};

Parameters

Below are the parameters for XlviLoader that you can customize.

OptionDescriptionTypeDefault
classNameclass attribute for loaderStringxlviloader
backgoundBackground color of loaderStringtransparent
boxColorsColors of the boxesArray["#333"]
sizeSize of the logoString64px
desktopSizeSize of the logo on desktopString(empty)
mobileSizeSize of the logo on mobileString(empty)

You can pass one, two or three colors to boxColors. If there is only one color, then all boxes will be in single color. If there are two colors, then the second color will be repeated. Also, if the colors are more than three, then it will only take first three colors.

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 Oleg Frolov