ds-preloader-js

ds-preloader-js - lightweight and easy to use javascript preloader

Usage no npm install needed!

<script type="module">
  import dsPreloaderJs from 'https://cdn.skypack.dev/ds-preloader-js';
</script>

README

ds-preloader-js


Demo

https://shkredovdmitriy.github.io/ds-preloader-js

https://codepen.io/shkredovdmitriy/pen/bGwqXOa

Advantages

  • Easy to use
  • Has no dependencies
  • Small size (less than 2kb min+gzip)

Without installation

Add this lines to head

<link href="https://unpkg.com/ds-preloader-js@0.1.16/dist/ds-preloader.min.css" rel="stylesheet">

<script src="https://unpkg.com/ds-preloader-js@0.1.16/dist/ds-preloader.min.js"></script>

Add this class to body

<body class="ds-prl-body">

Simple working example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <link href="https://unpkg.com/ds-preloader-js@0.1.16/dist/ds-preloader.min.css" rel="stylesheet">
  <script src="https://unpkg.com/ds-preloader-js@0.1.16/dist/ds-preloader.min.js"></script>
</head>
<body class="ds-prl-body">
  <img src="https://shkredovdmitriy.github.io/ds-preloader-js/images/image-demo-1.jpg" class="ds-preloader-demo-image">
  <img src="https://shkredovdmitriy.github.io/ds-preloader-js/images/image-demo-2.jpg" class="ds-preloader-demo-image">
  <img src="https://shkredovdmitriy.github.io/ds-preloader-js/images/image-demo-3.jpg" class="ds-preloader-demo-image">
  <img src="https://shkredovdmitriy.github.io/ds-preloader-js/images/image-demo-4.jpg" class="ds-preloader-demo-image">
</body>
</html>

License

MIT License