devsnips
Search docs, APIs, guides…

Component

Loading Modal

Loading state modal with animated spinner, progress bar, status indicator, and processing message for async operations.

  • Component
  • Tailwind
  • HTML
  • MIT

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/modals/loading-modal/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Modals/loading-modal
registry path: Tailwind/Components/Modals/loading-modal

Source

Implementation

code.html 
<!-- Loading Modal -->
<div id="loading-modal" class="fixed inset-0 z-50 hidden">
  <!-- Backdrop -->
  <div class="fixed inset-0 bg-black/70 backdrop-blur-sm"></div>
  
  <!-- Modal Content -->
  <div class="fixed inset-0 flex items-center justify-center p-4">
    <div class="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-sm p-8 text-center">
      
      <!-- Animated Loader -->
      <div class="relative w-24 h-24 mx-auto mb-6">
        <div class="absolute inset-0 border-4 border-gray-200 dark:border-gray-700 rounded-full"></div>
        <div class="absolute inset-0 border-4 border-transparent border-t-blue-600 rounded-full animate-spin"></div>
        <div class="absolute inset-2 border-4 border-transparent border-t-purple-600 rounded-full animate-spin" style="animation-direction: reverse; animation-duration: 1.5s;"></div>
        <div class="absolute inset-4 border-4 border-transparent border-t-pink-600 rounded-full animate-spin" style="animation-duration: 2s;"></div>
        <div class="absolute inset-0 flex items-center justify-center">
          <svg class="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
          </svg>
        </div>
      </div>
      
      <!-- Progress -->
      <div class="mb-4">
        <p class="text-lg font-semibold text-gray-900 dark:text-white">Processing your request</p>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Please wait while we complete the task...</p>
      </div>
      
      <!-- Progress Bar -->
      <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2 overflow-hidden">
        <div class="h-full bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 rounded-full transition-all duration-500" style="width: 45%;"></div>
      </div>
      
      <!-- Status -->
      <div class="flex items-center justify-center gap-2 mt-4 text-sm text-gray-500 dark:text-gray-400">
        <div class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
        <span>45% complete</span>
      </div>
    </div>
  </div>
</div>

<!-- Demo Trigger Button -->
<button onclick="openModal('loading-modal')" class="px-6 py-3 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white font-medium rounded-xl hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2">Open Loading Modal</button>
44 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/modals/loading-modal
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/modals/loading-modal/

Install: npx devsnips add
Tailwind/Components/Modals/loading-modal

This is the Loading Modal — Loading state modal with animated spinner, progress bar, status indicator, and processing message for async operations.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/modals/loading-modal