Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Spinner implementation #120

Open
gabbsmo opened this issue Mar 20, 2024 · 3 comments
Open

Spinner implementation #120

gabbsmo opened this issue Mar 20, 2024 · 3 comments
Labels
enhancement New feature or request

Comments

@gabbsmo
Copy link

gabbsmo commented Mar 20, 2024

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
Copy link
Contributor

Happy to take your PR on that.

@StfBauer StfBauer added the enhancement New feature or request label Mar 28, 2024
@gabbsmo
Copy link
Author

gabbsmo commented Apr 22, 2024

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 pushed a commit to gabbsmo/htwoo that referenced this issue May 16, 2024
@gabbsmo
Copy link
Author

gabbsmo commented May 16, 2024

Opened PR #135

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants