Progress Indicators

<svg style="height: 32px; width: 32px;"> <use xlink:href="#dds__loading-sqrs"></use>
</svg>

<div> <!-- The first div is used as a full screen background overlay. There are a few components that use this overlay so it only needs to be added once preferably at the top of the page below the body tag. This is a usable example. <div id="dds__full-screen-overlay" class="dds__overlay"></div> --> <!-- This is the actual HTML used to represent the Loading Modal --> <div id="exampleModalLoading" class="dds__modal dds__loading-modal" tabindex="-1" role="dialog" aria-hidden="true" style=""> <div class="dds__modal-dialog" role="document"> <div class="dds__modal-content"> <div class="dds__modal-body dds__text-center"> <div class="dds__mb-3" id="modalId"> <svg style="height: 32px; width: 32px;"> <use xlink:href="#dds__loading-sqrs"></use> </svg> </div> <p>Processing… Please wait.</p> </div> </div> </div> </div> <button id="loading-test-button" class="dds__btn dds__btn-primary" data-target="#exampleModalLoading">Programmatic Modal Launch</button> <!-- Example usage of initializing the loading modal and controlling it via javascript
<script> // Construct the Loading the Modal and assign it to a variable so we control it programatically var loadingModal = new UIC.Modal(document.getElementById("loading-test-button"), { backdrop: 'static' } ); // This is just to show how you could programatically launch the loading modal (eg. On HTTP request) using the loadingModal variable reference document.querySelector("#loading-test-button").addEventListener("click", function (e){ loadingModal.show(); }); //This is just to show how to programatically hide the loading modal (eg. HTTP request completes) using the loadingModal variable reference document.querySelector("#exampleModalLoading").addEventListener("click", function (e){ loadingModal.hide(); });
</script> -->
</div>