Files: afdcd2c2e04a1a406e0fb9e3efbe92ebfd65e1e2 / lib / progress / html / render.js
905 bytesRaw
1 | const svg = require('mutant/svg-element') |
2 | const computed = require('mutant/computed') |
3 | const when = require('mutant/when') |
4 | |
5 | module.exports = function (pos, classList) { |
6 | const pending = computed(pos, x => x > 0 && x < 1) |
7 | return svg('svg RadialProgress', { |
8 | viewBox: '-20 -20 240 240', |
9 | classList |
10 | }, [ |
11 | svg('path', { |
12 | d: 'M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200', |
13 | 'stroke-width': 40, |
14 | stroke: '#CEC', |
15 | fill: 'none' |
16 | }), |
17 | svg('path', { |
18 | d: 'M100,0 a100,100 0 0 1 0,200 a100,100 0 0 1 0,-200', |
19 | 'stroke-dashoffset': computed(pos, (pos) => { |
20 | pos = Math.min(Math.max(pos, 0), 1) |
21 | return (1 - pos) * 629 |
22 | }), |
23 | style: { |
24 | transition: when(pending, 'stroke-dashoffset 0.1s', 'stroke-dashoffset 0') |
25 | }, |
26 | 'stroke-width': 40, |
27 | 'stroke-dasharray': 629, |
28 | stroke: '#33DA33', |
29 | fill: 'none' |
30 | }) |
31 | ]) |
32 | } |
33 |
Built with git-ssb-web