Tailwind CSS + Font Awesome: Loading Button Examples

Updated: July 5, 2022 By: Pennywise Post a comment

This practical article shows you how to create common kinds of loading buttons by making use of Tailwind CSS and Font Awesome icons:

  • Rectangular Loading Button
  • Rounded Loading Button
  • Circle Loading Button
  • Disabled Loading Button

if you don’t familiar with Font Awesome, see this article Using Tailwind CSS with Font Awesome Icons: A Deep Dive.

Example Preview

The Complete Code

<!doctype html>

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

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

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

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

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


Final Words

Tailwind CSS and Font Awesome are so amazing. With their help, we can quickly and painlessly style elegant and vivid web pages. If you’d like to explore more new and exciting stuff in the modern frontend development world, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Related Articles