polymer_1.2.3/bower_components/paper-spinner/paper-spinner.html - Issue 1581713003: [third_party] add polymer 1.2.3

Side by Side Diff: polymer_1.2.3/bower_components/paper-spinner/paper-spinner.html

Issue 1581713003: [third_party] add polymer 1.2.3 (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master

Patch Set: 1.2.3 Created 4 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « polymer_1.2.3/bower_components/paper-spinner/index.html ('k') | polymer_1.2.3/bower_components/paper-spinner/paper-spinner-behavior.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!--

	2 @license

	3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.

	4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt

	5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt

	6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt

	7 Code distributed by Google as part of the polymer project is also

	8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt

	9 -->

	10

	11 <link rel="import" href="../polymer/polymer.html">

	12 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

	13 <link rel="import" href="../paper-styles/color.html">

	14 <link rel="import" href="paper-spinner-behavior.html">

	15 <link rel="import" href="paper-spinner-styles.html">

	16

	17 <!--

	18 Material design: [Progress & activity](https://www.google.com/design/spec/compon ents/progress-activity.html)

	19

	20 Element providing a multiple color material design circular spinner.

	21

	22 <paper-spinner active></paper-spinner>

	23

	24 The default spinner cycles between four layers of colors; by default they are

	25 blue, red, yellow and green. It can be customized to cycle between four differen t

	26 colors. Use <paper-spinner-lite> for single color spinners.

	27

	28 ### Accessibility

	29

	30 Alt attribute should be set to provide adequate context for accessibility. If no t provided,

	31 it defaults to 'loading'.

	32 Empty alt can be provided to mark the element as decorative if alternative conte nt is provided

	33 in another form (e.g. a text block following the spinner).

	34

	35 <paper-spinner alt="Loading contacts list" active></paper-spinner>

	36

	37 ### Styling

	38

	39 The following custom properties and mixins are available for styling:

	40

	41 Custom property \| Description \| Default

	42 ----------------\|-------------\|----------

	43 `--paper-spinner-layer-1-color` \| Color of the first spinner rotation \| `--googl e-blue-500`

	44 `--paper-spinner-layer-2-color` \| Color of the second spinner rotation \| `--goog le-red-500`

	45 `--paper-spinner-layer-3-color` \| Color of the third spinner rotation \| `--googl e-yellow-500`

	46 `--paper-spinner-layer-4-color` \| Color of the fourth spinner rotation \| `--goog le-green-500`

	47

	48 @group Paper Elements

	49 @element paper-spinner

	50 @hero hero.svg

	51 @demo demo/index.html

	52 -->

	53

	54 <dom-module id="paper-spinner">

	55 <template>

	56 <style include="paper-spinner-styles"></style>

	57

	58 <div id="spinnerContainer" class-name="[[__computeContainerClasses(active, _ _coolingDown)]]">

	59 <div class="spinner-layer layer-1">

	60 <div class="circle-clipper left">

	61 <div class="circle"></div>

	62 </div><div class="gap-patch">

	63 <div class="circle"></div>

	64 </div><div class="circle-clipper right">

	65 <div class="circle"></div>

	66 </div>

	67 </div>

	68

	69 <div class="spinner-layer layer-2">

	70 <div class="circle-clipper left">

	71 <div class="circle"></div>

	72 </div><div class="gap-patch">

	73 <div class="circle"></div>

	74 </div><div class="circle-clipper right">

	75 <div class="circle"></div>

	76 </div>

	77 </div>

	78

	79 <div class="spinner-layer layer-3">

	80 <div class="circle-clipper left">

	81 <div class="circle"></div>

	82 </div><div class="gap-patch">

	83 <div class="circle"></div>

	84 </div><div class="circle-clipper right">

	85 <div class="circle"></div>

	86 </div>

	87 </div>

	88

	89 <div class="spinner-layer layer-4">

	90 <div class="circle-clipper left">

	91 <div class="circle"></div>

	92 </div><div class="gap-patch">

	93 <div class="circle"></div>

	94 </div><div class="circle-clipper right">

	95 <div class="circle"></div>

	96 </div>

	97 </div>

	98 </div>

	99 </template>

	100

	101 <script>

	102 Polymer({

	103 is: 'paper-spinner',

	104

	105 behaviors: [

	106 Polymer.PaperSpinnerBehavior

	107 ]

	108 });

	109 </script>

	110 </dom-module>

OLD	NEW