Web Component Amazing Loading

Lightweight loading animation < 10k 😎 Compatible with React, Vue, Angular & other frameworks.

Vue usage

npm i web-component-amazing-loading

<script setup>
import AmazingLoading from 'web-component-amazing-loading';

let amazingLoadingElement = null;

onMounted(() => {
  amazingLoadingElement = document.querySelector('#amazing-loading');

  const showLoadingButton = document.querySelector('#show-loading-button');
  showLoadingButton.addEventListener('click', showLoading)
});


function showLoading(event) {
  amazingLoadingElement.showLoading();
}
</script>


<template>
<amazing-loading id="amazing-loading"/>
</template>

vite config

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('amazing-loading')
        }
      }
    })
  ],

Contact

Feel free to ping me 💫 [email protected]

giladshohat.com