# @teste-ui/spinner

> A React component for displaying spinners and loaders

Latest version **2.0.4** (published 2022-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teste-ui/spinner
pnpm add @teste-ui/spinner
yarn add @teste-ui/spinner
bun add @teste-ui/spinner
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2022-07-14 |
| First published | 2022-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 35.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Segun Adebayo |
| Maintainers | benits |
| Keywords | spinner, loader, react, chakra ui |

## Links

- npm: https://www.npmjs.com/package/@teste-ui/spinner
- Repository: https://github.com/teste-ui/teste-ui
- Homepage: https://github.com/teste-ui/teste-ui#readme
- Issues: https://github.com/teste-ui/teste-ui/issues
- npm.io page: https://npm.io/package/@teste-ui/spinner

## Dependencies (2)

- [@teste-ui/utils](https://npm.io/package/@teste-ui/utils.md) 2.0.4
- [@teste-ui/visually-hidden](https://npm.io/package/@teste-ui/visually-hidden.md) 2.0.4

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2022-07-14

## README

# @teste-ui/spinner

Spinners provide a visual cue that an action is processing, awaiting a course of
change or a result.

## Installation

```sh
yarn add @teste-ui/spinner

# or

npm i @teste-ui/spinner
```

## Import component

```jsx
import { Spinner } from "@teste-ui/spinner"
```

## Usage

```jsx
<Spinner />
```

## Spinner with different sizes

Change the size of the spinner by passing the `size` prop.

```jsx
<>
  <Spinner size="xs" />
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size="xl" />
</>
```

## Spinner with color

Change the background color of the moving section of the spinner by passing the
`color` prop.

```jsx
<Spinner color="red.500" />
```

## Spinner with empty area color

Change the background color of the spinner by passing the `emptyColor` prop.

```jsx
<Spinner color="red.500" emptyColor="gray.200" />
```

## Spinner with different speed

Change the spinner's animation speed area by passing the `speed` prop. The unit
of the value matches the
[`animation-duration` CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration)
property.

```jsx
<Spinner color="red.500" emptyColor="gray.200" speed="0.65s" />
```

---
_Source: https://npm.io/package/@teste-ui/spinner · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._