Skip to content

Commit 356f25c

Browse files
JosefJezekJosefJezek
committed
First commit
1 parent b636db9 commit 356f25c

File tree

7 files changed

+379
-1
lines changed

7 files changed

+379
-1
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components

‎README.md‎

Lines changed: 91 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,91 @@
1-
# s-circle-progress
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

‎bower.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
}

‎demo/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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>

‎index.html‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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>

‎s-circle-progress.html‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
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: stroke-dashoffset 150ms;
45+
46+
stroke: var(--s-circle-progress-stroke-color, --accent-color);
47+
stroke-linecap: var(--s-circle-progress-stroke-linecap, round);
48+
}
49+
50+
</style>
51+
52+
<svg id="circle" width="100%" height="100%">
53+
<circle class="Circle-background"
54+
r$="[[_radius]]"
55+
cx$="[[_cx]]"
56+
cy$="[[_cy]]"
57+
fill="transparent"
58+
stroke-width$="[[strokeWidth]]" />
59+
<circle class="Circle-foreground"
60+
r$="[[_radius]]"
61+
cx$="[[_cx]]"
62+
cy$="[[_cy]]"
63+
fill="transparent"
64+
stroke-width$="[[strokeWidth]]"
65+
stroke-dasharray$="[[_dasharray]]"
66+
stroke-dashoffset$="[[_dashoffset]]"
67+
transform$="[[_transform]]" />
68+
</svg>
69+
70+
<content></content>
71+
72+
</template>
73+
<script>
74+
75+
Polymer({
76+
is: 's-circle-progress',
77+
78+
behaviors: [
79+
Polymer.IronResizableBehavior
80+
],
81+
82+
properties: {
83+
/**
84+
* Value of circular progress bar.
85+
*/
86+
value: {
87+
type: Number,
88+
value: 0
89+
},
90+
91+
/**
92+
* Maximum of value.
93+
*/
94+
max: {
95+
type: Number,
96+
value: 100
97+
},
98+
99+
/**
100+
* Stroke width of circle.
101+
*/
102+
strokeWidth: {
103+
type: Number,
104+
value: 4
105+
},
106+
107+
/**
108+
* Starting angle of the progress.
109+
*/
110+
angle: {
111+
type: Number,
112+
value: -90
113+
},
114+
115+
_cx: {
116+
type: Number,
117+
value: null
118+
},
119+
120+
_cy: {
121+
type: Number,
122+
value: null
123+
},
124+
125+
_radius: {
126+
type: Number,
127+
computed: '_computeRadius(_cx, _cy, strokeWidth)'
128+
},
129+
130+
_transform: {
131+
type: String,
132+
computed: '_computeTransform(angle, _cx, _cy)'
133+
},
134+
135+
_dasharray: {
136+
type: Number,
137+
computed: '_computeDashArray(_radius)'
138+
},
139+
140+
_dashoffset: {
141+
type: Number,
142+
computed: '_computeDashOffset(value, max, _dasharray)'
143+
}
144+
},
145+
146+
listeners: {
147+
"iron-resize": "_onIronResize"
148+
},
149+
150+
_computeDashArray: function(radius) {
151+
return 2 * Math.PI * radius;
152+
},
153+
154+
_computeDashOffset: function(value, max, dasharray) {
155+
return (1 - value / max) * dasharray;
156+
},
157+
158+
_computeRadius: function(cx, cy, strokeWidth) {
159+
return cx && cy ? Math.max(0, Math.min(cx, cy) - strokeWidth / 2) : 0;
160+
},
161+
162+
_computeTransform: function(angle, cx, cy) {
163+
return cx && cy ? 'rotate(' + angle + ', ' + cx + ', ' + cy + ')' : '';
164+
},
165+
166+
_onIronResize: function() {
167+
if (this.offsetWidth && this.offsetHeight) {
168+
this._cx = this.offsetWidth / 2;
169+
this._cy = this.offsetHeight / 2;
170+
this.$.circle.style.display = 'block';
171+
}
172+
}
173+
});
174+
175+
</script>
176+
</dom-module>

‎test/s-circle-progress_test.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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>

0 commit comments

Comments
 (0)