Loading Animation with TailwindCSS

TailwindCSS makes it easy to create a basic site layout, but what about some loading animation to give your site a little something? There are many ways to achieve this, but here's a little setup with Tailwind that I've used on my articles index page...

Start by adding the animation definition to the /tailwind.config.js file - this is where we create our new animation class that we can then apply anywhere in our site.

  • module.exports = {

    • theme: {

      • extend: {

        • keyframes: {

          • "fade-in-up": {

            • "0%": {

              • opacity: "0",

              • transform: "translateY(4em) rotate(-12deg)",

            • },

            • "100%": {

              • opacity: "1",

              • transform: "translateY(0) rotate(0deg)",

            • },

          • },

        • },

      • },

      • animation: {

        • "fade-in-up": "fade-in-up 1.0s ease-out",

      • },

    • },

  • };

Then we just apply that new animation class in our HTML template.

  • {% for piece in data.pieces %}

    • <article class="animate-fade-in-up">

      • ... Some content here

    • </article>

  • {% endfor %}

And now we have a loading animation...


You can see the effect in action by just browsing to /articles