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