Comment créer un bouton de chargement dans Tailwind CSS

Fournir un retour visuel est essentiel pour l'expérience utilisateur. Dans ce tutoriel, nous allons vous montrer comment créer un bouton de chargement à l'aide de Tailwind CSS. C'est simple et parfait pour tout projet Web. Commençons !

Cela crée un bouton bleu avec une icône de chargement en rotation et un texte** Chargement…**. Le bouton est désactivé lors du chargement.

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

---

Chargement du CSS Tailwind du bouton avec AlpineJS

Ce bouton utilise Alpine.js pour gérer son état et son apparence. Lorsque vous cliquez dessus, il affiche une icône de chargement et change le texte en Chargement… pendant 2 secondes.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!