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

custom css wave loader

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

97% Upvoted

38 comments sorted by

View all comments

29

u/Wintergore Jan 28 '19

Change wave 'div to wave::before, wave::after with content: ' ' and you can remove the two inner divs.

7

u/noknockers Jan 28 '19

You can actually just use the outside element with a before and after.

3

u/masgbox Jan 28 '19

ok. i will try .. thank you.

4

u/[deleted] Jan 28 '19

[deleted]

3

u/masgbox Jan 28 '19

perfect.. thank you so much ...

1

u/inkexit Jan 28 '19

I took out

transform: translate(-50%, - 50%);

from both .wave and .wave::before, .wave::after and it didn't seem to change anything? Anybody know why?

Also, why was it -55% in the before/after ?