Web component to seamlessly create a loader from your logo image or icon
<head>
<script type="module" src="https://cdn.jsdelivr.net/npm/logo-loader@0.1.3/dist/logoLoader.esm.min.js"></script>
</head>or
npm i logo-loader
then
// main.js|ts
import 'logo-loader'
<body>
<logo-loader src="my-logo.png"></logo-loader>
</body>or pass the image/icon as a slot:
<body>
<logo-loader>
<img src="my-logo.svg">
</logo-loader>
</body>Defines the animation style ("default" or "pulse")
<logo-loader src="..." mode="pulse"></logo-loader>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))