search

lukehaas / css-loaders

A collection of loading spinners animated with CSS
MIT License
7.05k stars 1.04k forks source link

How to resize the loaders #14

Closed steelbrain closed 9 years ago

steelbrain commented 9 years ago

Sorry if it's a noob question but I am kinda confused here, I tried changing the container size, the loader div's width/height, the font-size. nothing seems to work. Any help would be appreciated.

MrGeneric commented 9 years ago

You change the font-size property in the .loader class to change the size.

steelbrain commented 9 years ago

I tried it already and it seems to disappear when I drop the font-size below 74px and at 74px it's already tiny. I am using the sixth loader by the way,

steelbrain commented 9 years ago

I just tested it in the demo site and changing font-size seems to work for other spinners, not the sixth one :disappointed:

MrGeneric commented 9 years ago

74px would be massive, it's almost full-screen for me?

I am able to change the font-size property of the sixth loader on the demo site. At 74px though I need to change the overflow property of the load-container to visible for it to show up. :smile:

Edit: nevermind, I was looking at the 8th one, sorry. I'll see if I can figure out how to scale it.

MrGeneric commented 9 years ago

If you add a new transform: scale(x,y); property to the .load-container, you can scale the loader up or down.

transform: scale(.5,.5); will make it half size. transform: scale(2,2); will make it double.

steelbrain commented 9 years ago

It's not a solution, but a workaround. But i've got no problem with it as long as it works. Thanks for your time and help. I appreciate that :smile: (I don't understand why GitHub smile is a laughter).

MrGeneric commented 9 years ago

Haha yeah, it's a workaround but I'm not sure if it's even possible to change the size just by editing the loader class. I couldn't figure it out at least, and there's only so much time I can spend looking at it while I'm supposed to be working. :smile:

You're welcome, glad to help!