Skip to main content

Forums

This topic contains 4 replies, has 3 voices, and was last updated by  bearhead 2 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #254045

    culbrique
    Participant

    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….

    #254053

    Shikkediel
    Participant

    Probably easiest to used a centered dot:

    https://jsfiddle.net/pr54v6bb/

    #254058

    culbrique
    Participant

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

    #254065

    Shikkediel
    Participant

    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.

    #254069

    bearhead
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star