@andresclua/preloader NPM

Hello everyone! This is A library for loading (images and fonts) - Take a look at the Example

Install

npm i @andresclua/preloader

Old School Javascript Invoke

(async function() {
  const preloader = new Preloader({});
 /*
  loadAssets function will preloader all elements with custom attribute 'tf-ds-preloader' 
 */
  const assetsLoader = await preloader.loadAssets('tf-ds-preloader');
  /*
  Use The name of a font-family property
  */
  const fontLoader = await preloader.loadFonts('Syne');
  if(assetsLoader ==true && fontLoader == true ){
    document.querySelector('.b--preloader-a').classList.add('b--preloader-a--is-hidden');
  }
})();

ES6 Javascript

// using this other package for this demo.
import JSUTIL from '@andresclua/jsutil/src/js_helper';
import Preloader from './Preloader';
class Page{
    constructor(){
        this.JSUTIL = new JSUTIL();
        this.events()
    }
    async events(){ 
        const preloader = new Preloader({});
        /*
            loadAssets function will preloader all elements with custom attribute 'tf-ds-preloader' 
        */
        const assetsLoader = await preloader.loadAssets('tf-ds-preloader');
        /*
            Use The name of a font-family property
        */
        const fontLoader = await preloader.loadFonts('Syne');
        if(assetsLoader ==true && fontLoader == true ){
            this.JSUTIL.addClass(document.querySelector('.b--preloader-a'),'b--preloader-a--is-hidden');
        }
    }
}
export default Page;
new Page()

Basic Html & CSS Structure

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <title>Preloader by - Andrés Clúa</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700&display=swap" rel="stylesheet">
</head>
<body>
  <div class="b--preloader-a">
  </div>

  <div class="container">
    <div class="row">
      <div class="col-6 offset-3 text-center">
       <h3 class="h2 my-5">Preloader Assets and fonts</h3>
      </div>
    </div>
    <div class="row">
      <div class="col-6 offset-3">
        <img class="tf-ds-preloader mb-5 img-fluid" src="https://source.unsplash.com/user/c_v_r/1600x900" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-6 offset-3">
        <img class="tf-ds-preloader mb-5 img-fluid" src="https://source.unsplash.com/user/c_v_r/1600x900" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-6 offset-3">
        <img class="tf-ds-preloader mb-5 img-fluid" src="https://source.unsplash.com/user/c_v_r/1600x900" alt="">
      </div>
    </div>
    <div class="row">
      <div class="col-6 offset-3">
        <img class="tf-ds-preloader mb-5 img-fluid" src="https://source.unsplash.com/user/c_v_r/1600x900" alt="">
      </div>
    </div>
  </div>
  <style>
    body{
      font-family: 'Syne', sans-serif;
    }
    .b--preloader-a {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 101;
      width: 100%;
      height: 100vh;
      pointer-events: all;
      background:red;
      opacity: 1;
      transition: all .7s cubic-bezier(0.6, -0.28, 0.735, 0.045)
    }
    .b--preloader-a--is-hidden {
        pointer-events: none;
        opacity: 0;
    }
  </style>
  <script src="./main.js"></script>
</body>
</html>

For Nuxt

1 - Create a file preloader.js inside plugins folder & add this.

import Preloader from '@andresclua/preloader/src/Preloader';
export default ({ app },inject) => {
    inject('Preloader', data => new Preloader(data) );
};

2 - Reference in your nuxt.config.js

plugins: [
    { src: '~/plugins/preloader.js', ssr: false }
  ]

3 - Use it in your .vue file

 async mounted(){
        if(process.client){
            const preloader = new this.$Preloader({});
            const asstsLoader = await preloader.loadAssets('tf-ds-preloader');
            const fontLoader = await preloader.loadFonts('Red Hat Display');
            this.$JSUTIL.addClass(document.querySelector('.b--preloader-a'),'b--preloader-a--is-hidden'); 
          
        }
    }

awesome