The latest articles on DEV Community by Arthur Borba (@arthur_borba_dd9893829a77). https://dev.to/arthur_borba_dd9893829a77 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3581993%2Ff30058d6-b4a5-4fce-8a1e-6df3069ea2fb.jpg https://dev.to/arthur_borba_dd9893829a77 en Arthur Borba Fri, 24 Oct 2025 14:00:55 +0000 https://dev.to/arthur_borba_dd9893829a77/logo-loader-an-easy-and-widely-applicable-web-component-that-creates-an-animation-from-an-image-or-gjb https://dev.to/arthur_borba_dd9893829a77/logo-loader-an-easy-and-widely-applicable-web-component-that-creates-an-animation-from-an-image-or-gjb <p>NPM Link: <a href="https://www.npmjs.com/package/logo-loader" rel="noopener noreferrer">https://www.npmjs.com/package/logo-loader</a></p> <p><strong>Demo:</strong><br> In the current version, there are two animation options, "default" or "pulse":</p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpwoy1s15m6hzqv6dtgil.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpwoy1s15m6hzqv6dtgil.gif" alt="logo-loader default mode demo" width="760" height="416"></a></p> <p><a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhy7i8k618y8qyrvab2y.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvhy7i8k618y8qyrvab2y.gif" alt="logo-loader pulse mode demo" width="800" height="448"></a></p> <p><strong>When to use?</strong><br> The package can be used by any web project since it was built with native browser APIs (web components), HTML, CSS, and JavaScript. The recommended use case is for displaying full-screen loaders or large section loaders within a page.</p> <p><strong>What's the advantage?</strong><br> The package was designed to be easily implemented in web projects and to strengthen the application's brand identity. Instead of using a generic loader, spinner, or progress bar, you can turn your project’s logo — which is already available in your code — into an animation.</p> <p><strong>Usage example:</strong><br> After the installation, you can add the tag to your HTML:<br> <code>&lt;logo-loader src="my-logo.png"&gt;&lt;/logo-loader&gt;</code></p> <p><strong>Next steps:</strong><br> Feel free to share feedback of the current version. In the future I aim to add more animation options</p> webcomponents frontend npm html