Introduction
Hi, DEV friends! 😁
Today we'll talk about how to improve the UX of your project by several times by implementing just a co...
For further actions, you may consider blocking this person and/or reporting abuse
...so what's the advantage over using SVG instead?
While this isn't really the best use-case for SVG, as the loader still ultimately adheres to the box-model, there's still nothing wrong with using SVG to build it. It certainly won't be slower than HTML+CSS, and might even be faster if your CSS loads from a remote file.
EDIT: Actually, SVG is the better option here: Not only will you need less of it, you will also need even less if you intend to repeat your loader several times thanks to
<use>elements; so you can reduce your file-size by quite a bit.For comparison: same thing with SVG, sans the animation because that's trivial anyway.
Hi,
Yes, if you use inline SVG, it will be just as fast as my version.
But in this article I specifically mentioned a variant of SVG loaders, which I met in a huge number of projects on the Internet. Namely, a file like
./src/assets/images/loader.svg, which is not even on the CDN, and not optimized via SVGO... That's why such a provocative headline was born. :)Compared to this approach, a bunch of Tailwind CSS + HTML will be much faster, since it's the markup and CSS have priority over loading, and only then everything else (as far as I remember the spec).
EDIT: I'm not even talking about different solutions like this. Where they suggest installing additional dependencies in the project, for the sake of creating what Tailwind can do out of the box with just a few CSS classes. Or your inline SVG option.
Uh I've been doing in this in most of my projects..
I just create a component that take children and add pulse animation and background color to it and it works.
I've tried SVG version, I need to adjust height, width also x and y (or maybe i did something wrong). It was really inconvenience.
With this, all I need to do is use width and height.
Nice article by the way!
Hi,
Great example of a solution to the problem I bring up in this article! Thanks.
You can even create these graphics using normal CSS. Why Tailwind though? A little bit of JS can help you avoid Tailwind, maybe that will reduce load times?
Hi,
Of course it is. But if you have a design system already using this CSS framework in the frontend team, why not use the built-in tools in Tailwind so you don't have to write the code yourself? ;)
Speeding up development is also a win.
Seems justified from your aspect. But making your own code gives you more flexibility. Either way, we win.
As I answered in this comment, the purpose of the article was to show that you don't have to use loaders everywhere in SVG files or when plugging in JS dependencies to do the same via Tailwind (especially if it is ALREADY used in the project).
Further, in the article I wanted to share my experience. I do a lot of reviews of different web projects (mostly on UX) and I often see a picture like this:
loader-for-X.svgcan be very numerous in the project for each type of content loading (I counted over 25 in one project, for example);Hence this article was born. I in no way meant to hurt the feelings of the true SVG developers (can I call them that?) who move this wonderful technology forward.
Yes, I understand that the flexibility to write your own solutions would be higher, but not many project managers are willing to wait for a frontend developer to implement such a thing on pure SVG or especially JavaScript (which you will then have to maintain). Time-to-market in 2k21 is a king.
I never knew there were these many hurdles in using SVGs. But, I might always use CSS (Normal CSS or Tailwind) than SVGs from now on. Anyways, thanks for the info!
Over-complexity. I have nothing against using CSS Frameworks, but we have SVG, period.
Hi,
As I answered above in the comments (twice) here and here, the article was written from the perspective that Tailwind CSS is ALREADY in your project.
So why write something by hand from scratch if you ALREADY use a framework where this functionality is ALREADY implemented out of the box with just two classes?
That's all, there was no further purpose to this article.