# @conectate/ct-spinner

> Spinner web component

Latest version **4.4.9** (published 2025-04-29) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install @conectate/ct-spinner
pnpm add @conectate/ct-spinner
yarn add @conectate/ct-spinner
bun add @conectate/ct-spinner
```

## Health

**Score 50/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 4.4.9 |
| Published | 2025-04-29 |
| First published | 2021-01-21 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 15 |
| Author | Herberth Obregón |
| Maintainers | herberthobregon |
| Keywords | LitElement, React, Vue, Angular, Web Components, Polymer |

## Links

- npm: https://www.npmjs.com/package/@conectate/ct-spinner
- Repository: https://github.com/conectate/ct-elements
- Issues: https://github.com/conectate/ct-elements/issues
- npm.io page: https://npm.io/package/@conectate/ct-spinner

## Dependencies (3)

- [lit](https://npm.io/package/lit.md) ^3.2.1
- [tslib](https://npm.io/package/tslib.md) ^2.6.3
- [@conectate/ct-lit](https://npm.io/package/@conectate/ct-lit.md) ^4.4.9

## 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

- 4.4.9 (latest) — 2025-04-29
- 4.3.0 — 2025-02-16
- 4.0.0 — 2024-07-27
- 3.12.0 — 2023-09-07
- 3.11.0 — 2023-09-02
- 3.10.0 — 2023-09-02
- 3.9.0 — 2023-08-11
- 3.8.1 — 2023-07-26
- 3.8.0 — 2023-07-26
- 3.7.5 — 2023-04-11
- 3.7.4 — 2023-01-12
- 3.7.3 — 2022-08-31
- 3.7.1 — 2022-08-09
- 3.7.0 — 2022-08-09
- 3.6.0 — 2022-02-27
- … 11 more at https://npm.io/package/@conectate/ct-spinner/versions

## README

<h1 align="center">@conectate/ct-spinner</h1>

<p align="center">
	<a href="https://npmcharts.com/compare/@conectate/ct-spinner?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@conectate/ct-spinner.svg" height="20"/></a>
	<a href="https://www.npmjs.com/package/@conectate/ct-spinner"><img alt="NPM Version" src="https://img.shields.io/npm/v/@conectate/ct-spinner.svg" height="20"/></a>
	<a href="https://github.com/conectate/ct-elements/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/conectate/ct-elements.svg" height="20"/></a>
	<a href="https://www.webcomponents.org/element/conectate/ct-element"><img alt="Published on webcomponents.org" src="https://img.shields.io/badge/webcomponents.org-published-blue.svg" height="20"/></a>

</p>

## `ct-spinner`

Spinner web component

## Install

```bash
pnpm i @conectate/ct-spinner
#or
npm i @conectate/ct-spinner
```

## Usage

On HTML

```html
<!-- Active -->
<ct-spinner active="true"></ct-spinner>
<!-- Inactive -->
<ct-spinner active="false"></ct-spinner>
```

On `LitElement` with typescript

```typescript
import { LitElement, css, customElement, html, property } from "lit";

@customElement("ct-main")
export class CtMain extends LitElement {
	@property({ type: Boolean, reflect: true }) active = true;

	static styles = css`
		:host {
			display: block;
		}
	`;

	render() {
		return html`<ct-spinner></ct-spinner>`;
	}
}
```

### DEMO

<img src="https://raw.githubusercontent.com/Conectate/ct-elements/master/images/packages/ct-spinner.png"/>

<!--
```
<custom-element-demo>
  <template>
    <script type="module">
      import "https://unpkg.com/@conectate/ct-spinner?module";
    </script>
    <ct-spinner></ct-spinner>
  </template>
</custom-element-demo>
```
-->

```html
<ct-spinner></ct-spinner>
```

## Properties

| Property | Attribute | Type      | Default |
| -------- | --------- | --------- | ------- |
| `active` | `active`  | `boolean` | true    |

## CSS Custom Properties

| Property         | Description     |
| ---------------- | --------------- |
| `--ct-spinner-1` | Spinner Color 1 |
| `--ct-spinner-2` | Spinner Color 2 |

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