Tailwind CSS + Font Awesome：加载按钮示例

CSS 4月前 31

这篇实用的文章向您展示了如何使用 Tailwind CSS 和 Font Awesome 图标创建常见类型的加载按钮：

矩形加载按钮
圆形加载按钮
圆形加载按钮
禁用加载按钮

示例预览

Tailwind CSS + Font Awesome：加载按钮示例

完整代码

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>KindaCode.com</title>
</head>

<body>
    <div class="p-20 flex flex-col items-start space-y-5">
        <!-- Rectangular loading button -->
        <button class="px-5 py-2 bg-blue-600 text-white/80">
            <i class="fa fa-circle-notch fa-spin mr-2"></i>
            Loading...
        </button>

        <!-- Rounded loading button -->
        <button class="px-6 py-3 bg-green-600 text-white rounded-full drop-shadow">
            <i class="fa fa-sync fa-spin mr-2"></i>
            Synchronizing Data
        </button>

        <!-- Circular loading button -->
        <button class="w-24 h-24 flex justify-center items-center bg-rose-500 rounded-full drop-shadow-md">
            <i class="fa-solid fa-spinner fa-spin text-white text-5xl"></i>
        </button>


        <!-- Disabled loading button -->
        <button disabled class="px-5 py-2 bg-gray-300 text-lg text-gray-600 rounded-lg">
            <i class="fa-solid fa-cog fa-spin mr-1"></i>
            Please Wait
        </button>
    </div>
</body>

</html>