Spinner implementation
Opened this issue · 3 comments
gabbsmo commented
Is your feature request related to a problem? Please describe.
The Spinner component from Fluent UI is missing.
Describe the solution you'd like
See Fluent React.
Additional context
This is my attempt to port Microsoft's CSS to fit better with hTWOo:
@keyframes hoo-spinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*
* Animation from Fluent React
* MIT license: https://github.com/microsoft/fluentui/blob/master/packages/react/LICENSE
*/
.hoo-spinner {
display: block;
box-sizing: border-box;
border-radius: 50%;
border-width: 1.5px;
border-style: solid;
border-color: var(--themePrimary) var(--themeLight) var(--themeLight);
border-image: initial;
animation-name: hoo-spinner;
animation-duration: 1.3s;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}
.hoo-spinner,
.hoo-spinner.medium {
width: 1.25rem;
height: 1.25rem;
}
.hoo-spinner.xsmall {
width: 0.75rem;
height: 0.75rem;
}
.hoo-spinner.small {
width: 1rem;
height: 1rem;
}
.hoo-spinner.large {
width: 1.75rem;
height: 1.75rem;
}
StfBauer commented
Happy to take your PR on that.
gabbsmo commented
Thanks. I am currently reviewing the full design of my app. If the spinner ends up remaining in the final implementation, I will certainly send a PR with it.