Like many others, I've always found Dribbble as an excellent resource for design inspiration. When CodePen came onto the scene, it brought a new avenue for developers to share their work and gather feedback.

When I started using GSAP, I used both of these resources to help me learn the ins-and-outs of creating animations. So naturally, when I came across Same Herbert's loaders, it provided a unique experience to really flex my GSAP skills. The loaders are created in SMIL (Synchronized Multimedia Integration Language); which allows authors to create audiovisual interactions in a succinct API. While there has been some back-and-forth on the language's longevity, I decided to treat this as nothing more than an experiment; not a replacement, to provide users another way to consume the library. Here's what the library provides.

Within the finished product (below), you'll find individual timelines that match their position in the grid. Each loader presented it's own level of thinking for how best to approach them, and as with anything on the web - could be approached a dozen different ways. I hope you find the collection useful and something that you can pull out and use in your own projects. Let me know what you think!