Loader

[akshayaureatelabs]

Hi @devmahmud.
Need to put a loader for all the click events. Sometimes it's taking for time to give a response while the user can not assume whether that click was hit or not.

Thank you.

[AdityaB09]

First we have to create the loader style :

<style> .loading-spinner-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .loading-spinner { border: 4px solid rgba(0, 0, 0, 0.3); border-top: 4px solid #3498db; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; } @Keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style>

We have to even add the javascript code to enable loader and hide the loader after content is ready to display

<script> (Replace this with your actual time-consuming process) setTimeout(function() { document.querySelector('.loading-spinner-container').style.display = 'none'; }, 5000); </script>

Then create a div tag with class name : 'loading-spinner' and enclose it in div container with class name : 'loading-spinner-container' and add the above html code in either separate html file or in the base html template.