Just for my own reference, I will publish the skeleton css gist image/svg+xml I use in many of my projects here. It is very easy to use and very easy to extend with new shapes. You can check the --card and --rounded modifiers image/svg+xml for inspiration. In Sass: .skeleton { display: inline-block; height: 1em; position: relative; overflow: hidden; background-color: #dddbdd; &::after { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(#fff, 0) 0, rgba(#fff, 0.

So I was working on creating a nice extendable skeleton image/svg+xml component when I stumbled upon a problem: I wanted to create a base skeleton style for the component that could be extended outside the component using utility classes. Something like this: // Skeleton template <div class="skeleton"></div> // Skeleton CSS .skeleton { background: lightgray; width: 100%; height: 1em; // etc. } // Implementation of skeleton component // with utility classes <app-skeleton class="rounded p-1"></app-skeleton> However, what happened during runtime was the following: