├── .gitignore
├── README.md
├── bower.json
├── demo
    └── index.html
├── index.html
├── s-circle-progress.html
└── test
    └── s-circle-progress_test.html


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | [![Published on webcomponents.org][webcomponents-image]][webcomponents-url]
 2 | 
 3 | # \<s-circle-progress\>
 4 | 
 5 | Polymer-based web component displaying a circular progress bar.
 6 | 
 7 | Inspired by element [\<progress-bubble\>](https://github.com/tehapo/progress-bubble).
 8 | 
 9 | ## Demo
10 | 
11 | [Full demo][webcomponents-demo]
12 | 
13 | ## Usage
14 | 
15 | <!--
16 | ```
17 | <custom-element-demo>
18 |   <template>
19 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
20 |     <link rel="import" href="s-circle-progress.html">
21 |     <next-code-block></next-code-block>
22 |   </template>
23 | </custom-element-demo>
24 | ```
25 | -->
26 | ```html
27 | <s-circle-progress value="6" max="10">
28 |   60%
29 | </s-circle-progress>
30 | 
31 | <s-circle-progress value="30" angle="90" stroke-width="8">
32 |   <b>30s</b>
33 | </s-circle-progress>
34 | ```
35 | 
36 | ### Styling
37 | 
38 | The following custom properties and mixins are available for styling:
39 | 
40 | Custom property | Description | Default
41 | ----------------|-------------|----------
42 | `--s-circle-progress-bg-stroke-color` | The background color of the circle | `--paper-grey-100`
43 | `--s-circle-progress-stroke-color` | The stroke color of the circle | `--accent-color`
44 | `--s-circle-progress-stroke-linecap` | The stroke-linecap svg attribute of the circle | `round`
45 | 
46 | ## Installation
47 | 
48 | `bower i s-circle-progress -S`
49 | 
50 | ## Install the Polymer-CLI
51 | 
52 | First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your application locally.
53 | 
54 | ## Viewing Your Application
55 | 
56 | ```
57 | $ polymer serve
58 | ```
59 | 
60 | ## Building Your Application
61 | 
62 | ```
63 | $ polymer build
64 | ```
65 | 
66 | This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
67 | containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
68 | CSS, and JS optimizers.
69 | 
70 | You can serve the built versions by giving `polymer serve` a folder to serve
71 | from:
72 | 
73 | ```
74 | $ polymer serve build/bundled
75 | ```
76 | 
77 | ## Running Tests
78 | 
79 | ```
80 | $ polymer test
81 | ```
82 | 
83 | Your application is already set up to be tested via [web-component-tester](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally.
84 | 
85 | ## License
86 | 
87 | MIT: [StartPolymer/license](https://github.com/StartPolymer/license)
88 | 
89 | [webcomponents-image]: https://img.shields.io/badge/webcomponents.org-published-blue.svg
90 | [webcomponents-url]: https://beta.webcomponents.org/element/StartPolymer/s-circle-progress
91 | [webcomponents-demo]: https://beta.webcomponents.org/element/StartPolymer/s-circle-progress/demo/demo/index.html
92 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "s-circle-progress",
 3 |   "description": "Polymer-based web component displaying a circular progress bar.",
 4 |   "authors": [
 5 |     "The StartPolymer Project Authors (https://github.com/StartPolymer/authors)"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "keywords": [
 9 |     "web-components",
10 |     "polymer",
11 |     "circle",
12 |     "progress"
13 |   ],
14 |   "main": "s-circle-progress.html",
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git://github.com/StartPolymer/s-circle-progress.git"
18 |   },
19 |   "dependencies": {
20 |     "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.3.1",
21 |     "iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.5",
22 |     "paper-styles": "PolymerElements/paper-styles#^1.1.5",
23 |     "polymer": "Polymer/polymer#^1.4.0"
24 |   },
25 |   "devDependencies": {
26 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
27 |     "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
28 |     "web-component-tester": "^4.0.0",
29 |     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
30 |   }
31 | }
32 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>s-circle-progress demo</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 | 
11 |     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
12 |     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
13 |     <link rel="import" href="../s-circle-progress.html">
14 | 
15 |     <style is="custom-style" include="demo-pages-shared-styles">
16 |     </style>
17 |   </head>
18 |   <body>
19 |     <div class="vertical-section-container centered">
20 |       <h3>Basic s-circle-progress demo</h3>
21 |       <demo-snippet>
22 |         <template>
23 |           <s-circle-progress value="6" max="10">
24 |             60%
25 |           </s-circle-progress>
26 | 
27 |           <s-circle-progress value="30" angle="90" stroke-width="8">
28 |             <b>30s</b>
29 |           </s-circle-progress>
30 |         </template>
31 |       </demo-snippet>
32 |     </div>
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>s-circle-progress</title>
 8 | 
 9 |     <script src="../webcomponentsjs/webcomponents-lite.js"></script>
10 | 
11 |     <link rel="import" href="../iron-component-page/iron-component-page.html">
12 |   </head>
13 |   <body>
14 |     <iron-component-page src="s-circle-progress.html"></iron-component-page>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/s-circle-progress.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
  3 | <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  4 | <link rel="import" href="../paper-styles/default-theme.html">
  5 | 
  6 | <!--
  7 | `s-circle-progress`
  8 | Polymer-based web component displaying a circular progress bar.
  9 | 
 10 | @demo demo/index.html
 11 | -->
 12 | 
 13 | <dom-module id="s-circle-progress">
 14 | <template>
 15 | 
 16 | <style>
 17 | 
 18 | :host {
 19 |   @apply(--layout-vertical);
 20 |   @apply(--layout-center-center);
 21 | 
 22 |   position: relative;
 23 | 
 24 |   width: 64px;
 25 |   height: 64px;
 26 |   margin: 24px;
 27 | 
 28 |   border-radius: 50%;
 29 | }
 30 | 
 31 | svg {
 32 |   position: absolute;
 33 |   top: 0;
 34 |   left: 0;
 35 | 
 36 |   display: none;
 37 | }
 38 | 
 39 | .Circle-background {
 40 |   stroke: var(--s-circle-progress-bg-stroke-color, --paper-grey-100);
 41 | }
 42 | 
 43 | .Circle-foreground {
 44 |   transition: var(--s-circle-progress-transition, stroke-dashoffset 150ms);
 45 |   stroke: var(--s-circle-progress-stroke-color, --accent-color);
 46 |   stroke-linecap: var(--s-circle-progress-stroke-linecap, round);
 47 | }
 48 | 
 49 | </style>
 50 | 
 51 | <svg id="circle" width="100%" height="100%">
 52 |   <circle class="Circle-background"
 53 |       r$="[[_radius]]"
 54 |       cx$="[[_cx]]"
 55 |       cy$="[[_cy]]"
 56 |       fill="transparent"
 57 |       stroke-width$="[[strokeWidth]]" />
 58 |   <circle class="Circle-foreground"
 59 |       r$="[[_radius]]"
 60 |       cx$="[[_cx]]"
 61 |       cy$="[[_cy]]"
 62 |       fill="transparent"
 63 |       stroke-width$="[[strokeWidth]]"
 64 |       stroke-dasharray$="[[_dasharray]]"
 65 |       stroke-dashoffset$="[[_dashoffset]]"
 66 |       transform$="[[_transform]]" />
 67 | </svg>
 68 | 
 69 | <content></content>
 70 | 
 71 | </template>
 72 | <script>
 73 | 
 74 | Polymer({
 75 |   is: 's-circle-progress',
 76 | 
 77 |   behaviors: [
 78 |     Polymer.IronResizableBehavior
 79 |   ],
 80 | 
 81 |   properties: {
 82 |     /**
 83 |      * Value of circular progress bar.
 84 |      */
 85 |     value: {
 86 |       type: Number,
 87 |       value: 0
 88 |     },
 89 | 
 90 |     /**
 91 |      * Maximum of value.
 92 |      */
 93 |     max: {
 94 |       type: Number,
 95 |       value: 100
 96 |     },
 97 | 
 98 |     /**
 99 |      * Stroke width of circle.
100 |      */
101 |     strokeWidth: {
102 |       type: Number,
103 |       value: 4
104 |     },
105 | 
106 |     /**
107 |      * Starting angle of the progress.
108 |      */
109 |     angle: {
110 |       type: Number,
111 |       value: -90
112 |     },
113 | 
114 |     _cx: {
115 |       type: Number,
116 |       value: null
117 |     },
118 | 
119 |     _cy: {
120 |       type: Number,
121 |       value: null
122 |     },
123 | 
124 |     _radius: {
125 |       type: Number,
126 |       computed: '_computeRadius(_cx, _cy, strokeWidth)'
127 |     },
128 | 
129 |     _transform: {
130 |       type: String,
131 |       computed: '_computeTransform(angle, _cx, _cy)'
132 |     },
133 | 
134 |     _dasharray: {
135 |       type: Number,
136 |       computed: '_computeDashArray(_radius)'
137 |     },
138 | 
139 |     _dashoffset: {
140 |       type: Number,
141 |       computed: '_computeDashOffset(value, max, _dasharray)'
142 |     }
143 |   },
144 | 
145 |   listeners: {
146 |     "iron-resize": "_onIronResize"
147 |   },
148 | 
149 |   _computeDashArray: function(radius) {
150 |     return 2 * Math.PI * radius;
151 |   },
152 | 
153 |   _computeDashOffset: function(value, max, dasharray) {
154 |     return (1 - value / max) * dasharray;
155 |   },
156 | 
157 |   _computeRadius: function(cx, cy, strokeWidth) {
158 |     return cx && cy ? Math.max(0, Math.min(cx, cy) - strokeWidth / 2) : 0;
159 |   },
160 | 
161 |   _computeTransform: function(angle, cx, cy) {
162 |     return cx && cy ? 'rotate(' + angle + ', ' + cx + ', ' + cy + ')' : '';
163 |   },
164 | 
165 |   _onIronResize: function() {
166 |     if (this.offsetWidth && this.offsetHeight) {
167 |       this._cx = this.offsetWidth / 2;
168 |       this._cy = this.offsetHeight / 2;
169 |       this.$.circle.style.display = 'block';
170 |     }
171 |   }
172 | });
173 | 
174 | </script>
175 | </dom-module>
176 | 


--------------------------------------------------------------------------------
/test/s-circle-progress_test.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
 6 | 
 7 |     <title>s-circle-progress test</title>
 8 | 
 9 |     <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
10 |     <script src="../../web-component-tester/browser.js"></script>
11 | 
12 |     <link rel="import" href="../s-circle-progress.html">
13 |   </head>
14 |   <body>
15 |     <test-fixture id="basic">
16 |       <template>
17 |         <s-circle-progress></s-circle-progress>
18 |       </template>
19 |     </test-fixture>
20 | 
21 |     <script>
22 |       suite('s-circle-progress', function() {
23 |         test('instantiating the element works', function() {
24 |           var element = fixture('basic');
25 |           assert.equal(element.is, 's-circle-progress');
26 |         });
27 |       });
28 |     </script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------