Directory

← Back

loading-spinner

Polymer-based web component for a loading spinner

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/BrightspaceUI/loading-spinner on 2019-05-10 ]

Looking for SASS-based d2l-loading-spinner? It's over here.

d2l-loading-spinner

Published on webcomponents.org Bower version Build status

Polymer-based web component loading spinner.

screenshot of loading component

For further information on this and other components, refer to The Brightspace UI Guide.

Installation

d2l-loading-spinner can be installed from Bower:

bower install d2l-loading-spinner

Usage

Include the webcomponents.js "lite" polyfill (for browsers who don't natively support web components), then import d2l-loading-spinner.html:

<head>
  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../d2l-loading-spinner/d2l-loading-spinner.html">
</head>
<d2l-loading-spinner></d2l-loading-spinner>

Size

The size (default 50px) can be adjusted using the size attribute:

<d2l-loading-spinner size="100"></d2l-loading-spinner>

Or by setting the --d2l-loading-spinner-size CSS property:

<custom-style>
.huge-spinner {
  --d2l-loading-spinner-size: 400px;
}
</custom-style>
<d2l-loading-spinner class="huge-spinner"></d2l-loading-spinner>

Color

While not recommended, the default color (blue) can be set using the color attribute:

<d2l-loading-spinner color="red"></d2l-loading-spinner>

Or by setting the --d2l-loading-spinner-color CSS property:

<custom-style>
.red-spinner {
  --d2l-loading-spinner-color: red;
}
</custom-style>
<d2l-loading-spinner class="red-spinner"></d2l-loading-spinner>

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 globally:

npm install -g polymer-cli

To start a local web server that hosts the demo page and tests:

polymer serve

To lint (eslint and Polymer lint):

npm run lint

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.

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • d2l-colors#^3.1.2
  • polymer#1.9.3 - 2
Released
2018-02-12
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 5.0.5
Browser
Browser Independent

loading-spinner - Vaadin Add-on Directory

Polymer-based web component for a loading spinner loading-spinner - Vaadin Add-on Directory
**[ 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 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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. ![screenshot of loading component](/loading-spinner.gif?raw=true) 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.
Online