vernesong/three-dots

Three Dots is a free collection of loading animations for websites and web apps. Instead of building a "please wait" spinner from scratch, you drop in a ready-made animation so your users see something polished while content loads in the background. The library offers around fifteen different animations with names like dot-elastic, dot-pulse, dot-typing, and dot-windmill. To use one, you include the project's stylesheet in your page and add a single empty container element tagged with the class name of the animation you want. That's it, the stylesheet handles the rest, animating the three dots automatically. What makes this project notable is its technical simplicity. Each animation is built entirely with CSS, and each one uses only a single HTML element. The CSS creates the illusion of three dots by cleverly styling the element itself along with its "before" and "after" pseudo-elements, then animating them. This keeps your page lightweight since you don't need JavaScript or heavy image files for a loading indicator. You can also customize the look. If you know a bit of Sass, you can change variables to adjust the dot size, color, and spacing, then compile your own version. The project also includes LESS files contributed by the community, though the README notes those may not be fully up to date. This is a handy tool for web developers, designers, or anyone building a site who wants a clean, professional loading animation without the hassle of creating one from scratch. It works well for status indicators, content placeholders, or any moment where you need to tell the user "hang tight, something is happening."