Add New "Shards" Spinner

[kartikcho]

I have been reading your css animation tutorials for the past couple days and wanted to add my own spinner to your amazing work.

This is the spinner in action:

[kartikcho]

I would appreciate a code review as I have a few questions to ask.

I tried to begin with a full connected triangle animation but calc() wasn't giving correct size with a few decimal pixels error. The calculated border size should be 20 in this case. Screenshot:

Also there are a few recurring attributes that could be applied to every shard child but I don't know how other than defining a new class with those attributes. Would really appreciate your help, thanks.