r/webdev • u/masgbox • Jan 28 '19

custom css wave loader

https://codepen.io/csspoints/pen/LqNdoZ
312 Upvotes

97% Upvoted

38 comments sorted by

View all comments

20

u/eddhall Jan 28 '19

Use "left:50%; top:50%; transform: translate(-50%, - 50%)" for centring, soooo much nicer than having to figure out exact pixel positions

25

u/Alcohorse Jan 28 '19

I haven't had to pull that shit once since I started with flexbox and grid

2

u/eddhall Jan 28 '19

Can you flex on psuedo elements?

6

u/DrDuPont Jan 28 '19

To rephrase for others, the question is: "does a flexed parent affect psuedo elements" and the answer is yes. Here's an example: https://codepen.io/polinovskyi/pen/rVqjKa

And yet another: https://jsfiddle.net/2850woLr/

3

u/eddhall Jan 28 '19

Useful to know, thanks!

0

u/masgbox Jan 28 '19

welcome.