**[ This description is mirrored from README.md at [github.com/BrightspaceUI/loading-spinner](https://github.com//BrightspaceUI/loading-spinner/blob/v7.3.0/README.md) on 2019-05-10 ]**
**Looking for SASS-based `d2l-loading-spinner`?** It's [over here](https://github.com/BrightspaceUI/loading-spinner/tree/sass).
# d2l-loading-spinner
[](https://www.webcomponents.org/element/BrightspaceUI/loading-spinner)
[![Bower version][bower-image]][bower-url]
[![Build status][ci-image]][ci-url]
[Polymer](https://www.polymer-project.org)-based web component loading spinner.
For further information on this and other components, refer to [The Brightspace UI Guide](https://github.com/BrightspaceUI/guide/wiki).
## Installation
`d2l-loading-spinner` can be installed from [Bower][bower-url]:
```shell
bower install d2l-loading-spinner
```
## Usage
Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyfill (for browsers who don't natively support web components), then import `d2l-loading-spinner.html`:
```html
```
```html
```
### Size
The size (default `50px`) can be adjusted using the `size` attribute:
```html
```
Or by setting the `--d2l-loading-spinner-size` [CSS property](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties):
```html
.huge-spinner {
--d2l-loading-spinner-size: 400px;
}
```
### Color
While not recommended, the default color (blue) can be set using the `color` attribute:
```html
```
Or by setting the `--d2l-loading-spinner-color` [CSS property](https://www.polymer-project.org/2.0/docs/devguide/custom-css-properties):
```html
.red-spinner {
--d2l-loading-spinner-color: red;
}
```
## Developing, Testing and Contributing
After cloning the repo, run `npm install` to install dependencies.
If you don't have it already, install the [Polymer CLI](https://www.polymer-project.org/2.0/docs/tools/polymer-cli) globally:
```shell
npm install -g polymer-cli
```
To start a [local web server](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#serve) that hosts the demo page and tests:
```shell
polymer serve
```
To lint ([eslint](http://eslint.org/) and [Polymer lint](https://www.polymer-project.org/2.0/docs/tools/polymer-cli-commands#lint)):
```shell
npm run lint
```
[bower-url]: http://bower.io/search/?q=d2l-loading-spinner
[bower-image]: https://badge.fury.io/bo/d2l-loading-spinner.svg
[ci-url]: https://travis-ci.org/BrightspaceUI/loading-spinner
[ci-image]: https://travis-ci.org/BrightspaceUI/loading-spinner.svg?branch=master
## Versioning
Commits and PR merges to master will automatically do a minor version bump which will:
* Update the version in `package.json`
* Add a tag matching the new version
* Create a github release matching the new version
By using either **[increment major]** or **[increment patch]** notation inside your merge message, you can overwrite the default version upgrade of minor to the position of your choice.
