n8design/htwoo

Spinner implementation

Opened this issue · 3 comments

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;
    }

Happy to take your PR on that.

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.

Opened PR #135