# PatternFly Elements Spinner
     
`<pf-spinner>` is used to indicate to users that an action is in progress.

Read more about Spinner in the [PatternFly Elements Spinner documentation](https://patternflyelements.org/components/spinner)

##  Installation

Load `<pf-spinner>` via CDN:

```html
<script src="https://jspm.dev/@patternfly/elements/pf-spinner/pf-spinner.js"></script>
```

Or, if you are using [NPM](https://npm.im), install it

```bash
npm install @patternfly/elements
```

Then once installed, import it to your application:

```js
import '@patternfly/elements/pf-spinner/pf-spinner.js';
```

## Usage
```html
<pf-spinner>Loading...</pf-spinner>
```

### Size variations

```html
<pf-spinner size="sm">Loading...</pf-spinner>
<pf-spinner size="md">Loading...</pf-spinner>
<pf-spinner size="lg">Loading...</pf-spinner>
<pf-spinner size="xl">Loading...</pf-spinner>
```

### Custom size

```html
<pf-spinner diameter="80px">Loading...</pf-spinner>
```

