Pate the below code in any File and save it as html file.<\/p>\r\n
<!--------- CSS ---------->\r\n<style>\r\n\t#loader {\r\n position: fixed;\r\n z-index: 9999;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(255, 255, 255, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n display: none;\r\n}\r\n\r\n.spinner {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n border-top-color: #333;\r\n border-radius: 50%;\r\n width: 40px;\r\n height: 40px;\r\n animation: spin 1s linear infinite;\r\n}\r\n\r\n@keyframes spin {\r\n to { transform: rotate(360deg); }\r\n}\r\n\r\n<\/style>\r\n<!--------- HTML ---------->\r\n<div id=\"loader\">\r\n\t<div class=\"spinner\"><\/div>\r\n<\/div>\r\n<button id=\"submit-btn\">Submit<\/button>\r\n<!--------- JS ---------->\r\n<script type=\"text\/javascript\">\r\n\tconst loader = document.getElementById('loader');\r\n\tconst submitBtn = document.getElementById('submit-btn');\r\n\r\n\tsubmitBtn.addEventListener('click', function() {\r\n\t loader.style.display = 'flex';\r\n\t \/\/ Perform AJAX request here\r\n\t setTimeout(function() {\r\n\t loader.style.display = 'none';\r\n\t }, 2000); \/\/ Remove after 2 seconds to simulate AJAX response\r\n\t});\r\n\r\n<\/script><\/code><\/pre>","category_id":"10","is_private":"0","created_at":"2023-03-23T23:24:44.000000Z","updated_at":"2023-03-23T23:24:44.000000Z","category":{"id":10,"user_id":"1","name":"CSS","slug":"css-a43c","parent_id":null,"created_at":"2023-03-21T01:17:14.000000Z","updated_at":"2023-03-21T01:17:14.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"Pate the below code in any File and save it as html file. <!--------- CSS ----------> <style> \t#loader { position: fixed; - Creating a Full-Screen HTML\/CSS Loader for AJAX Requests simple (Updated: March 23, 2023) - Read more about Creating a Full-Screen HTML\/CSS Loader for AJAX Requests simple at my programming site [SITE]","categories":[]}