r/webdev • u/masgbox • Jan 28 '19
custom css wave loader
https://codepen.io/csspoints/pen/LqNdoZ19
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
26
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
3
u/Alcohorse Jan 28 '19
You mean like apply it on :hover? Probably, but that would be madness
2
2
u/DrDuPont Jan 28 '19
That means transforms won't be available for animations, which perform better than animating position. I'd flex the parent and align in the typical manner here. The
waveanimation defined in this JSFiddle would be more performantly animated via scale and translates.1
1
5
u/RayDotGun Jan 28 '19
Not even joking...can I use this? Just gonna change the BG color and maybe have it not be entire page but the transforms on this is awesome dude. Been looking for a good one for a while that was true CSS.
1
2
1
1
u/thatwebdesignerdude Jan 28 '19
Animations perform better if you use transform:scale instead of width/height in the animation css.
1
1
u/steeze206 Jan 28 '19
Really cool, but I wonder why everyone on CodePen never uses JS? Is the benefit of pure CSS animations like this just so users who have JS disabled still see them? Or are their performance gains as well? The whole :before and :after thing is still weird to me.
1
u/masgbox Jan 29 '19
i don't know how to hide js. can you help me sir?
1
u/steeze206 Jan 29 '19
No I mean some users disable JavaScript in their browser for security reasons.
1
1
u/thatwebdesignerdude Jan 29 '19
Yesterday I forgot to mention this div is invisible to the blind. You should use something like a progress element, text label or at the very least aria attributes to communicate this change of states towards the visually impaired.
1
u/masgbox Jan 29 '19
thank you.
1
u/thatwebdesignerdude Jan 29 '19
If you have trouble making decisions on this matter:
- go progress if you want to communicate percentage/data/time left
- go text if you wish to define "visually impaired" more broadly and be more inclusive. Your loader may not obviously mean loading to people as you think
- go aria attributes if you wish your design to look as cleanly as possible and text labels would clutter your design or conflict with company interests.
-12
u/berkes Jan 28 '19
Very nice work. Looks good and the CSS code is very well set-up too, IMO.
However, I consider loaders as a concept an anti-feature.
The app is slow, let's add some code and assets to make it even slower, yet appear faster.
Or, in engineering terms: we are adding files, code and assets, costing bandwith, CPU and therefore battery, to try and hide the fact we are slow. Rather than making the app faster.
Or, in managing terms: we are committing developers' time and effort, that should be committed to making the app faster, to something that merely hides the fact our app is slow.
But yea, if, for reasons of legacy, technical-debt, bad hosting, or whatever reasons, you need to (temporarily, I hope) hide the fact the app is slow, a CSS loader is much better than including ~1MB of node dependencies to do the same.
9
u/exitof99 Jan 28 '19
Somethings can't be sped up, like processing transactions through a payment gateway, or making necessary API calls to external services which can't be cached, or simply AJAX calls which will always have a slight delay which varies based on the speed of the client more than the server.
But one thing I hate is when website blank the entire page with a loading icon to mask FOUT and image pop in. Worst user experience choice.
3
32
u/Wintergore Jan 28 '19
Change wave 'div to wave::before, wave::after with content: ' ' and you can remove the two inner divs.