...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.
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).
The main point I wanted to make is that you don't have to use SVG at all, if wonderful Tailwind provides all tools to implement loaders (of any complexity and appearance) through plain CSS. That's all.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
...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.