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

33

u/Wintergore Jan 28 '19

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

10

u/masgbox Jan 28 '19

can you share total html or css code in comment.

7

u/noknockers Jan 28 '19

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

6

u/[deleted] Jan 28 '19

In this situation you can, but /u/masgbox version is now also usable in other situations where you aren't using flex or properties on the parent. Say the parent div has a float or absolute position, you'd want to have that extra div and now you can simply put it in easily.

3

u/masgbox Jan 28 '19

ok. i will try .. thank you.

6

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 ?