Skip to content
Complex Loader and Progress Management for Vanilla JS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples gif example Jul 23, 2018
resources gif example Jul 23, 2018
.editorconfig
README.md Update README.md Jul 24, 2018
dom-wait.js readme Jul 23, 2018
index.html readme Jul 23, 2018
package.json

README.md

↺ DOM-wait

Multiple Process Loader Management for vanilla JavaScript.

Read the Medium post "Managing Complex Waiting Experiences on Web UIs".

DOM wait is a vanilla implementation of vue-wait.

DOM-wait helps to manage multiple loading states on the page without any conflict. It's based on a very simple idea that manages an array with multiple loading states.

🗝 Key Features

  • Zero-dependency. Requires nothing to work.
  • No CSS. Attaches and detaches elements instead of showing and hiding them.
  • Very simple API.

🚀 Quick Start

Add dom-wait.js to head.

<html>
  <head>
    <script src="dom-wait.js"></script>
  </head>
  <body>
  </body>
</html>

✂️ Usage

1. Write your HTML

dom-wait is very easy to use and migrate your current projects. Assume you have some API calls ipapi.co to get client IP.

<div>
  <h2>Your IP is:</h2>
  <div id='ip'>#.#.#.#</div>

  <script>
    var $ip = document.getElementById('ip');
    fetch('https://ipapi.co/json')
      .then(response => response.json())
      .then(response => {
        $ip.innerHTML = response.ip;
      });
  </script>
</div>

2. Add data-wait-for attribute

dom-wait watches elements with data-wait-for attribute with loading message.

<div data-wait-for='getting ip'>
  <h2>Your IP is:</h2>
  <div id='ip'>#.#.#.#</div>
</div>

2. Add .waiting element

This element will be attached when loading starts and detached when loading ends.

<div data-wait-for='getting ip'>

  <div class='waiting'>Getting IP...</div>

  <h2>Your IP is:</h2>
  <div id='ip'>#.#.#.#</div>
</div>

3. Start and stop waiters with wait.start and wait.end

var $ip = document.getElementById('ip');

// start waiting
wait.start('getting ip');

fetch('https://ipapi.co/json')
  .then(function (response) {
    return response.json();
  })
  .then(function (response) {
    $ip.innerHTML = response.ip;
    // end waiting
    wait.end('getting ip');
  });

🚦 Attach/Detach Based DOM Management

DOM-Wait doesn't make hide/show on elements. Instead, attaches and detaches elements to DOM. This makes DOM cleaner and lighter on waiting process.

<div data-wait-for="getting ip">
  <!--wait:8ef4c4e7-->
  <div id="ip">#.#.#.#</div>
</div>

DOM-Wait detaches .waiting elements from DOM and inserts a comment node instead. When loading starts it attaches back and detaches rest of the siblings:

<div data-wait-for="getting ip">
  <div class="waiting">Loading...</div>
  <!--wait:c9169aa9-->
</div>

License

MIT © Fatih Kadir Akın

You can’t perform that action at this time.