0.0.1 • Published 10 months ago

logo-loader v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

logo-loader

Web component to seamlessly create a loader from your logo image or icon

Installation

<head>
  <script type="module" src="https://cdn.jsdelivr.net/npm/logo-loader@0.0.1/dist/logoLoader.esm.min.js"></script>
</head>

or

// javascript file
import 'logo-loader'

Demo

Logo Loader Demo

Usage

<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.png">
  </logo-loader>
</body>

Attributes

pause

Pauses the animation:

<logo-loader src="..." pause></logo-loader>

or

<logo-loader src="..." pause="true"></logo-loader>

width & height (works only when using the src attribute)

Sets the logo size:

<logo-loader src="..." width="150" height="150"></logo-loader>

or

<logo-loader src="..." width="5rem" height="5rem"></logo-loader>

Note

  1. You must apply the component in a single colored background in order for it correctly animate
  2. You might find some distortions if the parent background has an alpha channel (e.g. rgba(x, x, x, 0.3))
logoloaderwebcomponent
@webcomponents/webcomponentsjs
0.0.1

10 months ago