How to make it Responsive

[Yashesh133]

No description provided.

[Yashesh133]

How to make it Responsive

[J-Zam]

Hi @Yashesh133, to make your loading spinner responsive, you can adjust its dimensions based on the screen size using conditional rendering. Here's an example of how you can achieve this using the ThreeDots component:

// Define height and width based on screen size
const loaderHeight = window.innerWidth >= 992 ? "42" : "45";
const loaderWidth = window.innerWidth >= 992 ? "80" : "60"; 

return (
  <ThreeDots
    height={loaderHeight}
    width={loaderWidth}
    radius="9"
    color="rgba(0, 0, 0, .4)"
    ariaLabel="three-dots-loading"
    wrapperStyle={{}} 
    visible={true}
  />
);

I hope it helps you!