Web component to seamlessly create a loader from your logo image or icon
Use your project's logo to create an infinite loader animation
npm i logo-loader
then import it in your app entry point (index.js, main.js...)
// main.js|ts
import 'logo-loader'Alternatively, include the script tag in your HTML header:
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/logo-loader@1.0.0/dist/logoLoader.esm.min.js"></script>
</head>The component provide 3 animation modes:
Simply use the <logo-loader ...></logo-loader> element in your HTML, passing either a src attribute or an <img> slot with your logo path:
<body>
<logo-loader src="my-logo.png"></logo-loader>
</body><body>
<logo-loader>
<img src="my-logo.svg">
</logo-loader>
</body>Defines the animation style ("classic", "pulse" or "buildup")
<logo-loader src="..." mode="pulse"></logo-loader>If omitted, the component fallsback to "classic"
Pauses the animation:
<logo-loader src="..." pause></logo-loader>or
<logo-loader src="..." pause="true"></logo-loader>Sets the logo size:
<logo-loader src="..." width="150" height="150"></logo-loader>or
<logo-loader src="..." width="5rem" height="5rem"></logo-loader>- You must apply the component in a single colored background in order for it correctly animate
- You might find some distortions if the parent background has an alpha channel (e.g.
rgba(x, x, x, 0.3))