Cara Membuat Butang Memuatkan dalam CSS Tailwind

Memberi maklum balas visual adalah penting untuk pengalaman pengguna. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat butang pemuatan menggunakan Tailwind CSS. Ia ringkas dan sesuai untuk sebarang projek web. Jom mulakan!

Ini menghasilkan butang biru dengan ikon pemuatan berputar dan** Memuatkan...** teks. Butang dinyahdayakan semasa memuatkan.

<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>

---

Memuatkan Butang Tailwind CSS dengan AlpineJS

Butang ini menggunakan Alpine.js untuk mengurus keadaan dan penampilannya. Apabila diklik, ia menunjukkan pemutar pemuatan dan menukar teks kepada Pemuatan… selama 2 saat.

<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>

Atas ialah kandungan terperinci Cara Membuat Butang Memuatkan dalam CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!