@ohos-ports/polymer-paper-spinner 0.0.0-stage → 3.0.2-beta.0

package/CONTRIBUTING.md

@@ -0,0 +1,77 @@
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!

package/README.md

@@ -1,3 +1,67 @@
-# Temporary Holding Version
+[![Published on NPM](https://img.shields.io/npm/v/@polymer/paper-spinner.svg)](https://www.npmjs.com/package/@polymer/paper-spinner)
+[![Build status](https://travis-ci.org/PolymerElements/paper-spinner.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-spinner)
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://webcomponents.org/element/@polymer/paper-spinner)
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+## <paper-spinner>
+Element providing a multiple color material design circular spinner.
+
+See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-spinner),
+  [Demo](https://www.webcomponents.org/element/@polymer/paper-spinner/demo/demo/index.html).
+
+## Usage
+
+### Installation
+```
+npm install --save @polymer/paper-spinner
+```
+
+### In an html file
+```html
+<html>
+  <head>
+    <script type="module">
+      import '@polymer/paper-spinner/paper-spinner.js';
+    </script>
+  </head>
+  <body>
+    <paper-spinner active></paper-spinner>
+  </body>
+</html>
+```
+### In a Polymer 3 element
+```js
+import {PolymerElement, html} from '@polymer/polymer';
+import '@polymer/paper-spinner/paper-spinner.js';
+
+class SampleElement extends PolymerElement {
+  static get template() {
+    return html`
+      <paper-spinner active></paper-spinner>
+    `;
+  }
+}
+customElements.define('sample-element', SampleElement);
+```
+
+## Contributing
+If you want to send a PR to this element, here are
+the instructions for running the tests and demo locally:
+
+### Installation
+```sh
+git clone https://github.com/PolymerElements/paper-spinner
+cd paper-spinner
+npm install
+npm install -g polymer-cli
+```
+
+### Running the demo locally
+```sh
+polymer serve --npm
+open http://127.0.0.1:<port>/demo/
+```
+
+### Running the tests
+```sh
+polymer test --npm
+```

package/bower.json

@@ -0,0 +1,4 @@
+{
+  "name": "paper-spinner",
+  "license": "http://polymer.github.io/LICENSE.txt"
+}

package/demo/index.html

@@ -0,0 +1,109 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html lang="en">
+  <head>
+    <title>paper-spinner demo</title>
+
+    <meta charset="UTF-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@^2.0.0/webcomponents-loader.js"></script>
+
+    <script type="module">
+      import '@polymer/iron-demo-helpers/demo-snippet.js';
+      import '@polymer/iron-demo-helpers/demo-pages-shared-styles.js';
+      import '@ohos-ports/polymer-paper-styles/color.js';
+      import '../paper-spinner-lite.js';
+      import '../paper-spinner.js';
+
+      import {html} from '@ohos-ports/polymer-polymer/lib/utils/html-tag.js';
+      const template = html
+      `<custom-style><style is="custom-style" include="demo-pages-shared-styles"></style></custom-style>`;
+      document.body.appendChild(template.content);
+    </script>
+
+    <custom-style>
+      <style is="custom-style">
+        .vertical-section-container {
+          max-width: 550px;
+        }
+
+        paper-spinner, paper-spinner-lite {
+          margin-right: 24px;
+        }
+      </style>
+    </custom-style>
+  </head>
+  <body unresolved>
+    <div class="vertical-section-container centered">
+      <h3>Spinners can be deactivated or activated</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-spinner></paper-spinner>
+          <paper-spinner active></paper-spinner>
+
+          <paper-spinner-lite></paper-spinner-lite>
+          <paper-spinner-lite active></paper-spinner-lite>
+
+          <button onclick="toggle(event)">Toggle</button>
+        </template>
+      </demo-snippet>
+
+      <h3>Spinners can be styled using custom properties</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <custom-style>
+            <style is="custom-style">
+              paper-spinner.multi {
+                --paper-spinner-layer-1-color: var(--paper-purple-500);
+                --paper-spinner-layer-2-color: var(--paper-cyan-500);
+                --paper-spinner-layer-3-color: var(--paper-blue-grey-500);
+                --paper-spinner-layer-4-color: var(--paper-amber-500);
+              }
+              paper-spinner-lite.orange {
+                --paper-spinner-color: var(--google-yellow-500);
+              }
+              paper-spinner-lite.green {
+                --paper-spinner-color: var(--google-green-500);
+              }
+              paper-spinner-lite.thin {
+                --paper-spinner-stroke-width: 1px;
+              }
+              paper-spinner-lite.thick {
+                --paper-spinner-stroke-width: 6px;
+              }
+            </style>
+          </custom-style>
+
+          <paper-spinner class="multi" active></paper-spinner>
+
+          <paper-spinner-lite class="orange" active></paper-spinner-lite>
+          <paper-spinner-lite class="green" active></paper-spinner-lite>
+
+          <paper-spinner-lite class="thin" active></paper-spinner-lite>
+          <paper-spinner-lite class="thick" active></paper-spinner-lite>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <script>
+      function toggle(event) {
+        var spinners = event.target.parentElement.querySelectorAll(
+            'paper-spinner, paper-spinner-lite');
+        Array.prototype.forEach.call(spinners, function(spinner) {
+          spinner.active = !spinner.active;
+        });
+      }
+    </script>
+  </body>
+</html>

package/hero.svg

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<path d="M112.1,92.3c-13.4,0-25.1-9.1-28.4-22l1.9-0.5c3.1,12.1,13.9,20.5,26.4,20.5c15,0,27.3-12.2,27.3-27.3
+			s-12.2-27.3-27.3-27.3c-8.1,0-15.8,3.6-21,9.8l-1.5-1.3c5.6-6.7,13.8-10.6,22.5-10.6c16.1,0,29.3,13.1,29.3,29.3
+			S128.2,92.3,112.1,92.3z"/>
+		<path d="M112.7,87.3c-6.6,0-12.7-2.5-17.3-7.2c-4.6-4.6-7.2-10.8-7.2-17.3c0-6.6,2.5-12.7,7.2-17.3c7.9-7.9,20.2-9.5,29.8-3.8
+			l-1,1.7c-8.8-5.3-20.1-3.8-27.4,3.5c-4.2,4.2-6.6,9.9-6.6,15.9s2.3,11.7,6.6,15.9s9.9,6.6,15.9,6.6c6,0,11.7-2.3,15.9-6.6
+			c4.7-4.7,7.1-11.3,6.5-18l2-0.2c0.7,7.3-1.9,14.4-7.1,19.6C125.4,84.7,119.2,87.3,112.7,87.3z"/>
+		<path d="M112.5,43.5C101.8,43.5,93,52.3,93,63s8.7,19.5,19.5,19.5S132,73.7,132,63S123.2,43.5,112.5,43.5z M119,64h-6v6h-2v-6h-6
+			v-2h6v-6h2v6h6V64z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>

package/manifest.json

@@ -0,0 +1,38 @@
+{
+  "files": {
+    "paper-spinner.html": {
+      "convertedUrl": "paper-spinner.js",
+      "exports": {}
+    },
+    "paper-spinner-behavior.html": {
+      "convertedUrl": "paper-spinner-behavior.js",
+      "exports": {
+        "Polymer.PaperSpinnerBehavior": "PaperSpinnerBehavior"
+      }
+    },
+    "paper-spinner-styles.html": {
+      "convertedUrl": "paper-spinner-styles.js",
+      "exports": {}
+    },
+    "paper-spinner-lite.html": {
+      "convertedUrl": "paper-spinner-lite.js",
+      "exports": {}
+    },
+    "index.html": {
+      "convertedUrl": "index.html",
+      "exports": {}
+    },
+    "demo/index.html": {
+      "convertedUrl": "demo/index.html",
+      "exports": {}
+    },
+    "test/index.html": {
+      "convertedUrl": "test/index.html",
+      "exports": {}
+    },
+    "test/paper-spinner.html": {
+      "convertedUrl": "test/paper-spinner.html",
+      "exports": {}
+    }
+  }
+}

package/package.json

@@ -1,6 +1,23 @@
 {
+  "description": "A material design spinner",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "spinner",
+    "loading"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/polymer-paper-spinner/3.0.2"
+  },
+  "homepage": "https://github.com/PolymerElements/paper-spinner",
   "name": "@ohos-ports/polymer-paper-spinner",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "license": "BSD-3-Clause",
+  "version": "3.0.2-beta.0",
+  "author": "The Polymer Authors",
+  "dependencies": {
+    "@ohos-ports/polymer-paper-styles": "^3.0.1-beta.0",
+    "@ohos-ports/polymer-polymer": "^3.5.2-beta.1"
+  }
+}

package/paper-spinner-behavior.d.ts

@@ -0,0 +1,29 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   paper-spinner-behavior.js
+ */
+
+export {PaperSpinnerBehavior};
+
+interface PaperSpinnerBehavior {
+
+  /**
+   * Displays the spinner.
+   */
+  active: boolean|null|undefined;
+
+  /**
+   * Alternative text content for accessibility support.
+   * If alt is present, it will add an aria-label whose content matches alt
+   * when active. If alt is not present, it will default to 'loading' as the
+   * alt value.
+   */
+  alt: string|null|undefined;
+}
+
+declare const PaperSpinnerBehavior: object;

package/paper-spinner-behavior.js

@@ -0,0 +1,73 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+import '@ohos-ports/polymer-polymer/polymer-legacy.js';
+
+/** @polymerBehavior */
+export const PaperSpinnerBehavior = {
+
+  properties: {
+    /**
+     * Displays the spinner.
+     */
+    active: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+      observer: '__activeChanged'
+    },
+
+    /**
+     * Alternative text content for accessibility support.
+     * If alt is present, it will add an aria-label whose content matches alt
+     * when active. If alt is not present, it will default to 'loading' as the
+     * alt value.
+     */
+    alt: {type: String, value: 'loading', observer: '__altChanged'},
+
+    __coolingDown: {type: Boolean, value: false}
+  },
+
+  __computeContainerClasses: function(active, coolingDown) {
+    return [
+      active || coolingDown ? 'active' : '',
+      coolingDown ? 'cooldown' : ''
+    ].join(' ');
+  },
+
+  __activeChanged: function(active, old) {
+    this.__setAriaHidden(!active);
+    this.__coolingDown = !active && old;
+  },
+
+  __altChanged: function(alt) {
+    // user-provided `aria-label` takes precedence over prototype default
+    if (alt === 'loading') {
+      this.alt = this.getAttribute('aria-label') || alt;
+    } else {
+      this.__setAriaHidden(alt === '');
+      this.setAttribute('aria-label', alt);
+    }
+  },
+
+  __setAriaHidden: function(hidden) {
+    var attr = 'aria-hidden';
+    if (hidden) {
+      this.setAttribute(attr, 'true');
+    } else {
+      this.removeAttribute(attr);
+    }
+  },
+
+  __reset: function() {
+    this.active = false;
+    this.__coolingDown = false;
+  }
+};

package/paper-spinner-lite.d.ts

@@ -0,0 +1,57 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   paper-spinner-lite.js
+ */
+
+import {Polymer} from '@ohos-ports/polymer-polymer/lib/legacy/polymer-fn.js';
+
+import {html} from '@ohos-ports/polymer-polymer/lib/utils/html-tag.js';
+
+import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
+
+import {LegacyElementMixin} from '@ohos-ports/polymer-polymer/lib/legacy/legacy-element-mixin.js';
+
+/**
+ * Material design: [Progress &
+ * activity](https://www.google.com/design/spec/components/progress-activity.html)
+ *
+ * Element providing a single color material design circular spinner.
+ *
+ *     <paper-spinner-lite active></paper-spinner-lite>
+ *
+ * The default spinner is blue. It can be customized to be a different color.
+ *
+ * ### Accessibility
+ *
+ * Alt attribute should be set to provide adequate context for accessibility. If
+ * not provided, it defaults to 'loading'. Empty alt can be provided to mark the
+ * element as decorative if alternative content is provided in another form (e.g. a
+ * text block following the spinner).
+ *
+ *     <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite>
+ *
+ * ### Styling
+ *
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--paper-spinner-color` | Color of the spinner | `--google-blue-500`
+ * `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+ */
+interface PaperSpinnerLiteElement extends PaperSpinnerBehavior, LegacyElementMixin, HTMLElement {
+}
+
+export {PaperSpinnerLiteElement};
+
+declare global {
+
+  interface HTMLElementTagNameMap {
+    "paper-spinner-lite": PaperSpinnerLiteElement;
+  }
+}

package/paper-spinner-lite.js

@@ -0,0 +1,75 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+import '@ohos-ports/polymer-polymer/polymer-legacy.js';
+import '@ohos-ports/polymer-paper-styles/color.js';
+import './paper-spinner-styles.js';
+
+import {Polymer} from '@ohos-ports/polymer-polymer/lib/legacy/polymer-fn.js';
+import {html} from '@ohos-ports/polymer-polymer/lib/utils/html-tag.js';
+
+import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
+
+const template = html`
+  <style include="paper-spinner-styles"></style>
+
+  <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
+    <div class="spinner-layer">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div>
+      <div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+  </div>
+`;
+template.setAttribute('strip-whitespace', '');
+
+/**
+Material design: [Progress &
+activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a single color material design circular spinner.
+
+    <paper-spinner-lite active></paper-spinner-lite>
+
+The default spinner is blue. It can be customized to be a different color.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If
+not provided, it defaults to 'loading'. Empty alt can be provided to mark the
+element as decorative if alternative content is provided in another form (e.g. a
+text block following the spinner).
+
+    <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-spinner-color` | Color of the spinner | `--google-blue-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+
+@group Paper Elements
+@element paper-spinner-lite
+@hero hero.svg
+@demo demo/index.html
+*/
+Polymer({
+  _template: template,
+
+  is: 'paper-spinner-lite',
+
+  behaviors: [PaperSpinnerBehavior]
+});

package/paper-spinner-styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   paper-spinner-styles.js
+ */
+
+
+export {};

package/paper-spinner-styles.js

@@ -0,0 +1,346 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+const $_documentContainer = document.createElement('template');
+$_documentContainer.setAttribute('style', 'display: none;');
+
+$_documentContainer.innerHTML = `<dom-module id="paper-spinner-styles">
+  <template>
+    <style>
+      /*
+      /**************************/
+      /* STYLES FOR THE SPINNER */
+      /**************************/
+
+      /*
+       * Constants:
+       *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+       *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+       *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+       *                                should rotate each time, 216 gives us a
+       *                                5 pointed star shape (it's 360/5 * 3).
+       *                                For a 7 pointed star, we might do
+       *                                360/7 * 3 = 154.286)
+       *      SHRINK_TIME = 400ms
+       */
+
+      :host {
+        display: inline-block;
+        position: relative;
+        width: 28px;
+        height: 28px;
+
+        /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+        --paper-spinner-container-rotation-duration: 1568ms;
+
+        /* ARCTIME */
+        --paper-spinner-expand-contract-duration: 1333ms;
+
+        /* 4 * ARCTIME */
+        --paper-spinner-full-cycle-duration: 5332ms;
+
+        /* SHRINK_TIME */
+        --paper-spinner-cooldown-duration: 400ms;
+      }
+
+      #spinnerContainer {
+        width: 100%;
+        height: 100%;
+
+        /* The spinner does not have any contents that would have to be
+         * flipped if the direction changes. Always use ltr so that the
+         * style works out correctly in both cases. */
+        direction: ltr;
+      }
+
+      #spinnerContainer.active {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+      }
+
+      @-webkit-keyframes container-rotate {
+        to { -webkit-transform: rotate(360deg) }
+      }
+
+      @keyframes container-rotate {
+        to { transform: rotate(360deg) }
+      }
+
+      .spinner-layer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        white-space: nowrap;
+        color: var(--paper-spinner-color, var(--google-blue-500));
+      }
+
+      .layer-1 {
+        color: var(--paper-spinner-layer-1-color, var(--google-blue-500));
+      }
+
+      .layer-2 {
+        color: var(--paper-spinner-layer-2-color, var(--google-red-500));
+      }
+
+      .layer-3 {
+        color: var(--paper-spinner-layer-3-color, var(--google-yellow-500));
+      }
+
+      .layer-4 {
+        color: var(--paper-spinner-layer-4-color, var(--google-green-500));
+      }
+
+      /**
+       * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+       *
+       * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+       * guarantee that the animation will start _exactly_ after that value. So we avoid using
+       * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
+       * seems).
+       */
+      .active .spinner-layer {
+        -webkit-animation-name: fill-unfill-rotate;
+        -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-name: fill-unfill-rotate;
+        animation-duration: var(--paper-spinner-full-cycle-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+        opacity: 1;
+      }
+
+      .active .spinner-layer.layer-1 {
+        -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-2 {
+        -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-3 {
+        -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-4 {
+        -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+      }
+
+      @-webkit-keyframes fill-unfill-rotate {
+        12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { -webkit-transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { -webkit-transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { -webkit-transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { -webkit-transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @keyframes fill-unfill-rotate {
+        12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @-webkit-keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @-webkit-keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      .circle-clipper {
+        display: inline-block;
+        position: relative;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      /**
+       * Patch the gap that appear between the two adjacent div.circle-clipper while the
+       * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
+       */
+      .spinner-layer::after {
+        content: '';
+        left: 45%;
+        width: 10%;
+        border-top-style: solid;
+      }
+
+      .spinner-layer::after,
+      .circle-clipper .circle {
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        border-width: var(--paper-spinner-stroke-width, 3px);
+        border-radius: 50%;
+      }
+
+      .circle-clipper .circle {
+        bottom: 0;
+        width: 200%;
+        border-style: solid;
+        border-bottom-color: transparent !important;
+      }
+
+      .circle-clipper.left .circle {
+        left: 0;
+        border-right-color: transparent !important;
+        -webkit-transform: rotate(129deg);
+        transform: rotate(129deg);
+      }
+
+      .circle-clipper.right .circle {
+        left: -100%;
+        border-left-color: transparent !important;
+        -webkit-transform: rotate(-129deg);
+        transform: rotate(-129deg);
+      }
+
+      .active .gap-patch::after,
+      .active .circle-clipper .circle {
+        -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-duration: var(--paper-spinner-expand-contract-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+      }
+
+      .active .circle-clipper.left .circle {
+        -webkit-animation-name: left-spin;
+        animation-name: left-spin;
+      }
+
+      .active .circle-clipper.right .circle {
+        -webkit-animation-name: right-spin;
+        animation-name: right-spin;
+      }
+
+      @-webkit-keyframes left-spin {
+        0% { -webkit-transform: rotate(130deg) }
+        50% { -webkit-transform: rotate(-5deg) }
+        to { -webkit-transform: rotate(130deg) }
+      }
+
+      @keyframes left-spin {
+        0% { transform: rotate(130deg) }
+        50% { transform: rotate(-5deg) }
+        to { transform: rotate(130deg) }
+      }
+
+      @-webkit-keyframes right-spin {
+        0% { -webkit-transform: rotate(-130deg) }
+        50% { -webkit-transform: rotate(5deg) }
+        to { -webkit-transform: rotate(-130deg) }
+      }
+
+      @keyframes right-spin {
+        0% { transform: rotate(-130deg) }
+        50% { transform: rotate(5deg) }
+        to { transform: rotate(-130deg) }
+      }
+
+      #spinnerContainer.cooldown {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+      }
+
+      @-webkit-keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+    </style>
+  </template>
+</dom-module>`;
+
+document.head.appendChild($_documentContainer.content);
+
+export {};

package/paper-spinner.d.ts

@@ -0,0 +1,62 @@
+/**
+ * DO NOT EDIT
+ *
+ * This file was automatically generated by
+ *   https://github.com/Polymer/tools/tree/master/packages/gen-typescript-declarations
+ *
+ * To modify these typings, edit the source file(s):
+ *   paper-spinner.js
+ */
+
+import {Polymer} from '@ohos-ports/polymer-polymer/lib/legacy/polymer-fn.js';
+
+import {html} from '@ohos-ports/polymer-polymer/lib/utils/html-tag.js';
+
+import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
+
+import {LegacyElementMixin} from '@ohos-ports/polymer-polymer/lib/legacy/legacy-element-mixin.js';
+
+/**
+ * Material design: [Progress &
+ * activity](https://www.google.com/design/spec/components/progress-activity.html)
+ *
+ * Element providing a multiple color material design circular spinner.
+ *
+ *     <paper-spinner active></paper-spinner>
+ *
+ * The default spinner cycles between four layers of colors; by default they are
+ * blue, red, yellow and green. It can be customized to cycle between four
+ * different colors. Use <paper-spinner-lite> for single color spinners.
+ *
+ * ### Accessibility
+ *
+ * Alt attribute should be set to provide adequate context for accessibility. If
+ * not provided, it defaults to 'loading'. Empty alt can be provided to mark the
+ * element as decorative if alternative content is provided in another form (e.g. a
+ * text block following the spinner).
+ *
+ *     <paper-spinner alt="Loading contacts list" active></paper-spinner>
+ *
+ * ### Styling
+ *
+ * The following custom properties and mixins are available for styling:
+ *
+ * Custom property | Description | Default
+ * ----------------|-------------|----------
+ * `--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500`
+ * `--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
+ * `--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
+ * `--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
+ * `--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+ */
+interface PaperSpinnerElement extends PaperSpinnerBehavior, LegacyElementMixin, HTMLElement {
+}
+
+export {PaperSpinnerElement};
+
+declare global {
+
+  interface HTMLElementTagNameMap {
+    "paper-spinner": PaperSpinnerElement;
+  }
+}

package/paper-spinner.js

@@ -0,0 +1,107 @@
+/**
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at
+http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
+http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
+found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
+part of the polymer project is also subject to an additional IP rights grant
+found at http://polymer.github.io/PATENTS.txt
+*/
+import '@ohos-ports/polymer-polymer/polymer-legacy.js';
+import '@ohos-ports/polymer-paper-styles/color.js';
+import './paper-spinner-styles.js';
+
+import {Polymer} from '@ohos-ports/polymer-polymer/lib/legacy/polymer-fn.js';
+import {html} from '@ohos-ports/polymer-polymer/lib/utils/html-tag.js';
+
+import {PaperSpinnerBehavior} from './paper-spinner-behavior.js';
+
+const template = html`
+  <style include="paper-spinner-styles"></style>
+
+  <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, __coolingDown)]]" on-animationend="__reset" on-webkit-animation-end="__reset">
+    <div class="spinner-layer layer-1">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div>
+      <div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+
+    <div class="spinner-layer layer-2">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div>
+      <div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+
+    <div class="spinner-layer layer-3">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div>
+      <div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+
+    <div class="spinner-layer layer-4">
+      <div class="circle-clipper left">
+        <div class="circle"></div>
+      </div>
+      <div class="circle-clipper right">
+        <div class="circle"></div>
+      </div>
+    </div>
+  </div>
+`;
+template.setAttribute('strip-whitespace', '');
+
+/**
+Material design: [Progress &
+activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a multiple color material design circular spinner.
+
+    <paper-spinner active></paper-spinner>
+
+The default spinner cycles between four layers of colors; by default they are
+blue, red, yellow and green. It can be customized to cycle between four
+different colors. Use <paper-spinner-lite> for single color spinners.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If
+not provided, it defaults to 'loading'. Empty alt can be provided to mark the
+element as decorative if alternative content is provided in another form (e.g. a
+text block following the spinner).
+
+    <paper-spinner alt="Loading contacts list" active></paper-spinner>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500`
+`--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
+`--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
+`--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+
+@group Paper Elements
+@element paper-spinner
+@hero hero.svg
+@demo demo/index.html
+*/
+Polymer({
+  _template: template,
+
+  is: 'paper-spinner',
+
+  behaviors: [PaperSpinnerBehavior]
+});