Implement hexagon spinner (new structure) #144
Conversation
|
Thanks @wolfika 🙏 let me have a look. |
|
|
||
| ```html | ||
| <div class="sk-hexagon"> | ||
| <div class="sk-hex-parent"> |
There was a problem hiding this comment.
Could we get rid of this sk-hex-parent element? It's only used for positioning that could be applied directly to the children, right?
|
|
||
| .sk-hex-child:nth-child(2), | ||
| .sk-hex-child:nth-child(3) { | ||
| top: calc(45 * var(--sk-hex-scale)); |
There was a problem hiding this comment.
There's a lot of calc usage in general here to position the three hexagons—could we just use %? They're just being centered horizontally or attached to a corner, right?
| 100% { | ||
| opacity: 0; | ||
| transform: scale(0) translateZ(0); | ||
| } |
There was a problem hiding this comment.
All keyframes that share all properties (like 100% and 0% can be defined on the same row 🙏
| .sk-hex-child { | ||
| animation: sk-hexagonAnimation 2s infinite cubic-bezier(.19, 1.6, .4, 1); | ||
| background-color: var(--sk-color); | ||
| display: block; |
There was a problem hiding this comment.
We don't need display: block when position is set to absolute 👀
| :root { | ||
| --sk-size: 40px; | ||
| --sk-color: #333; | ||
| --sk-hex-scale: (0.0096153846153846 * var(--sk-size)); |
There was a problem hiding this comment.
Where does this number come from? Why is it so exact? Can we get rid of if (if we get rid of the parent element)?
2 participants
Added a new hexagon spinner, in the new lib structure this time.