Centering loading dot loop

[culbrique]

Hi !
I can’t get my loading dot animation working in the very center of my div.
I tried everything, transform-origin, flexbox and many other things…
This is a reduced test case, and the challenge is keep the :before value because the div has already something inside.

https://jsfiddle.net/L37gb4cg/

Do you have some advices ?
For extra-suppa-pro animation, the dot needs to be at 30px max. when it get big and 5px to min….

[Shikkediel]

Probably easiest to used a centered dot:

https://jsfiddle.net/pr54v6bb/

[culbrique]

Yes, good point, but this dot is aligned to the bottom of the bottom, it’s not animated from the center of the dot

[Shikkediel]

Not sure what that means or refers to…
You don’t have to use a content dot of course, you could make the element a square with rounded corners using border-radius: 50%. That’ll give a lot more control over it.

[bearhead]

something like this maybe?
https://jsfiddle.net/8huv76tp/

[Author]

Posts