XLVI Loader
Loader with infite shape following effect
Usage
import { XlviLoader } from "react-awesome-loaders";export const XlviLoaderComponent = () => {return (<><XlviLoaderboxColors={["#EF4444", "#F59E0B", "#6366F1"]}desktopSize={"128px"}mobileSize={"100px"}/></>);};
Parameters
Below are the parameters for XlviLoader that you can customize.
Option | Description | Type | Default |
---|---|---|---|
className | class attribute for loader | String | xlviloader |
backgound | Background color of loader | String | transparent |
boxColors | Colors of the boxes | Array | ["#333"] |
size | Size of the logo | String | 64px |
desktopSize | Size of the logo on desktop | String | (empty) |
mobileSize | Size of the logo on mobile | String | (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
andmobileSize
attributes are defined relative to64px
for all loaders and it doesn't mean the actual size would be64px
. It means all the sizes defined will be w.r.t64px
. If you pass128px
then the size doubles. Also, note that if one of thedesktopSize
andmobileSize
is not defined, then it will use thesize
attribute. Value defined insize
attribute is assigned for mobile devices and loader automatically doubles the size on desktop device.
❤️ Inspired from codepen by Oleg Frolov