Circle Loader
Loader with 3D circle compaction-expansion effect
Usage
import { CircleLoader } from "react-awesome-loaders";export const CircleLoaderComponent = () => {return (<><CircleLoadermeshColor={"#6366F1"}lightColor={"#E0E7FF"}duration={1.5}desktopSize={"90px"}mobileSize={"64px"}/></>);};
Parameters
Below are the parameters for BoxesLoader that you can customize.
Option | Description | Type | Default |
---|---|---|---|
className | class attribute for loader | String | circleloader |
meshColor | Color of the circles | String | #6366F1 |
lightColor | Color of the light dropping on circular meshes | String | #FFFFFF |
lightIntensity | Intensity of the light dropping on meshes | Number | 0.4 |
ambientLightColor | Color of ambient light | String | #E8EBFB |
duration | Duration of animation | Number | 1 |
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) |
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
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 Aaron Iker