LottieFiles offers many animated loaders. You can filter by style (illustrations, emojis, icons, etc.) and customize the colors as you wish.
CSS Loader Generator by 10015
CSS Loader Generator is an easy-to-use generator by 10015.io. You can customize the colors, size, and speed. The generator includes all types of loaders, including spinners, bars, puls, progress, and more.
100 CSS Loaders
100 CSS Loaders is a curated list by Slider Revolution, including demos and the source code used to create the loader. Unlike a .gif, a CSS animation avoids the image request. This results in less bandwidth consumption and a faster loading process.
10 CSS Skeleton Loadings
10 CSS Skeleton Loadings is a collection of HTML and CSS skeleton loading examples from CodePen and other resources.
How to Build a Skeleton Screen
How to Build a Skeleton Screen with CSS for Better UX is a FreeCodeCamp article that teaches you what Skeleton Screens are, the different types of Skeleton screens, and how to create your content placeholders using CSS.
PlaReact Content Loader
PlaReact Content Loader allows you to create your animated skeleton-screen components giving a wireframe of your pages like placeholder boxes for content and images. Supports React, React Native, Vue, and vanilla HTML.
UI Ball Loaders
UI Ball Loaders offer free loaders & spinners for your next project. Built with HTML, CSS, and SVG. Available for React and copypasta.
CSS Loaders by FreeFrontend
FreeFrontend site collected 150+ great animated preloaders writing in HTML and CSS, all from Codepen.