n8design / htwoo

hTWOo - a better Fluent UI framework.
http://my.n8d.at/hTWOo
MIT License
91 stars 9 forks source link

Spinner implementation #120

Open gabbsmo opened 3 months ago

gabbsmo commented 3 months ago

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 3 months ago

Happy to take your PR on that.

gabbsmo commented 2 months ago

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.

gabbsmo commented 1 month ago

Opened PR #135