FlipFlop Loader

Loader with shaking O effect

Usage

P...

import { FlipFlopLoader } from "react-awesome-loaders";
export const FlipFlopLoaderComponent = () => {
  return (
    <>
      <FlipFlopLoader desktopSize={"128px"} mobileSize={"128px"} />
    </>
  );
};

Parameters

Below are the parameters for BoxesLoader that you can customize.

Option	Description	Type	Default
className	`class` attribute for loader	String	`flipfloploader`
textColor	Color of the text	String	`#4F46E5`
textBeforeRing	Text before O character	String	`FL`
textAfterRing	Text after O character	String	`P...`
ringColor	Color of the ring (O)	String	`#4F46E5`
ringShiness	Amount of shiness ring should have	Number	`20`
ringOpacity	Opacity of the ring	Number	`0.96`
ringTransparency	Whether the ring should be transparent	Bool	`true`
ringLightColor	Color of the light dropping on the ring	String	`#FFFFFF`
ringLightIntensity	Intensity of light dropping on the ring	Number	`0`
ringAmbientLightColor	Color of ambient light	String	`#eef4ff`
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 ringShiness, ringLightColor, ringLightIntensity, ringAmbientLightColor 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