Gestión de carga de múltiples progresos en Vanilla JavaScript-DOM-wait

Vista prévia

Descripción

DOM-Wait es una administración de cargador de progreso con JavaScript alimentado por vainilla para administrar experiencias de espera complejas en aplicaciones Web.

See it in action:

Funcionamiento

Descargue y coloque el archivo JavaScript ' Dom-wait. js ' en la cabecera del documento.

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

Utilíla en la aplicación Web.

<main data-wait-for="loading app">

<button onclick="wait.start('loading app')">Start App Loading</button>

<div id="heyo">0</div>

<div class="waiting">LOADING APP... <button onclick="wait.end('loading app')">End Loading</button></div>

<div data-wait-for="creating user">


<div class="waiting">CREATING USER... <button onclick="wait.end('creating user')">End Loading</button></div>


<h1>



User Created!


</h1>


<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nam aperiam magnam ea optio, iste voluptatibus nostrum quae. Reprehenderit at aut vel expedita. Consectetur nobis nisi nulla quasi ea, tenetur quaerat.</p>


<div data-wait-for="creating user subloader">



<div class="waiting">CREATING USER SUBLOADER... <button onclick="wait.end('creating user subloader')">End Sub Loading</button></div>



<h1>




User Created SUB!



</h1>



<button onclick="wait.start('creating user subloader')">Start Sub Loading</button>


</div>


<button onclick="wait.start('creating user')">Start Loading</button>

</div>

<hr>

<div data-wait-for="fetching users">


<div class="waiting">FETCHING USERS... <button onclick="wait.end('fetching users')">End Loading</button></div>


<h1>



Users fetched!


</h1>


<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Enim sed, aut fugit distinctio voluptatem delectus possimus laborum repudiandae culpa nisi ab, neque vero quo. Tempora, ipsam ab? Nisi, eaque unde!</p>


<button onclick="wait.start('fetching users')">Start Loading</button>

</div>

<hr>

????

<div>


Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi fuga facere aliquam dolorem nemo, dolor modi ipsum eveniet laudantium necessitatibus animi nam iste at tempora qui ea odit, dolorum in!


Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste temporibus, alias voluptatem quae magni perferendis excepturi, porro libero asperiores corporis beatae aut officia cum aliquam quibusdam sit sunt. Aliquid, cumque?


Lorem ipsum dolor sit amet consectetur adipisicing elit. A repellat dicta quis quasi, saepe cum commodi exercitationem quisquam vel atque reiciendis vero, facere ipsum fugiat enim aspernatur voluptates, reprehenderit iusto?

</div>
</main>

wait.ready(function () {

var id = document.getElementById('heyo');

setInterval(function () {


id.innerText = parseInt(id.innerText, 10) + 1;

}, 1000);

wait.start('loading app');
})