So erstellen Sie eine Ladeschaltfläche in Tailwind CSS

Die Bereitstellung von visuellem Feedback ist für die Benutzererfahrung von entscheidender Bedeutung. In diesem Tutorial zeigen wir Ihnen, wie Sie mit Tailwind CSS eine Ladeschaltfläche erstellen. Es ist einfach und perfekt für jedes Webprojekt. Fangen wir an!

Dadurch wird eine blaue Schaltfläche mit einem sich drehenden Ladesymbol und dem Text „Laden…“ erstellt. Die Schaltfläche ist während des Ladens deaktiviert.

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center" disabled>
  <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  Loading...
</button>

---

Laden von Button Tailwind CSS mit AlpineJS

Diese Schaltfläche verwendet Alpine.js, um ihren Status und ihr Erscheinungsbild zu verwalten. Wenn Sie darauf klicken, wird ein Lade-Spinner angezeigt und der Text wird für 2 Sekunden in „Laden…“ geändert.

<button
  x-data="{ loading: false }"
  x-on:click="loading = true; setTimeout(() => loading = false, 2000)"
  :class="{ 'opacity-50 cursor-not-allowed': loading }"
  :disabled="loading"
  class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline flex items-center"
>
  <svg
    x-show="loading"
    class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
  >
    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
  </svg>
  <span x-text="loading ? 'Loading...' : 'Submit'"></span>
</button>

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Ladeschaltfläche in Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!