DEV Community

Cover image for Build a Clean, Centered Loading Spinner with Pure Tailwind CSS
Codebar Library
Codebar Library

Posted on

Build a Clean, Centered Loading Spinner with Pure Tailwind CSS

#webdev #frontend #tailwindcss #ui

Loading screens are often an afterthought, but they are crucial for a polished user experience. Instead of reaching for a heavy external library, GIF, or writing complex custom CSS, I wanted to build something simple, clean, and highly customizable.

So, I built a Modern Loading Spinner with Centered Text using pure Tailwind CSS.

What I Built
This is a sleek, animated loading spinner that keeps the loading text perfectly aligned in the center. Here is why it stands out:
✅ Zero Custom CSS or JS: Built entirely with Tailwind utility classes.
✅ Lightweight & Fast: Incredibly easy to drop into any React, Vue, or HTML/Tailwind application.
✅ Perfectly Centered Text: Intelligently uses positioning so the text stays still while the ring spins smoothly.
✅ Highly Customizable: Effortlessly adjust the size, border thickness, and colors to match your brand's dark or light theme.

See It in Action

The Tech Breakdown
The magic behind this component relies on beautifully combining a few key Tailwind utilities:

  • The parent container uses relative positioning to hold the layout together.

  • The spinner ring itself uses rounded-full and animate-spin with specific border-color utilities (like border-t-transparent) to create the rotating effect.

  • The text inside uses absolute positioning to perfectly center itself independently of the spinning ring.

Where to Use This

  • Data Fetching States: Show this while making API calls in your dashboards.

  • Form Submissions: Let users know their data is being processed.

  • Initial Page Loads: Keep users engaged while your web app mounts.

Get the Free Code
This component is part of the Spinner category on my UI library.

👉 Get the free code → No sign-up required. Just copy, paste, and ship.

What is CodeBar Library?
CodeBar Library is a growing collection of free and premium UI components built for developers who care about design quality and clean code.

Everything is production-ready and copy-paste friendly. Whether you're building a portfolio, a SaaS product, or a client project — there's something to speed up your workflow.

👉 Browse all free components

Drop a ❤️ if you found this component useful and follow for more custom UI elements!
What kind of loading animations do you prefer in your apps? Let me know in the comments!

Top comments (0)