Circle Loader

Loader with 3D circle compaction-expansion effect

Usage

import { CircleLoader } from "react-awesome-loaders";
export const CircleLoaderComponent = () => {
return (
<>
<CircleLoader
meshColor={"#6366F1"}
lightColor={"#E0E7FF"}
duration={1.5}
desktopSize={"90px"}
mobileSize={"64px"}
/>
</>
);
};

Parameters

Below are the parameters for BoxesLoader that you can customize.

OptionDescriptionTypeDefault
classNameclass attribute for loaderStringcircleloader
meshColorColor of the circlesString#6366F1
lightColorColor of the light dropping on circular meshesString#FFFFFF
lightIntensityIntensity of the light dropping on meshesNumber0.4
ambientLightColorColor of ambient lightString#E8EBFB
durationDuration of animationNumber1
sizeSize of the logoString64px
desktopSizeSize of the logo on desktopString(empty)
mobileSizeSize of the logo on mobileString(empty)

Some of the color parameters like lightColor, lightIntensity, ambientLightColor are added for this loader since it is created in 3D using three.js and the resultant loader is the 3D model.

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