git ssb

10+

Matt McKegg / patchwork



Tree: 611893db73609fa2881490d2853965c07461ee17

Files: 611893db73609fa2881490d2853965c07461ee17 / modules / progress / html / render.js

1095 bytesRaw
1var svg = require('mutant/svg-element')
2var computed = require('mutant/computed')
3var when = require('mutant/when')
4var nest = require('depnest')
5
6exports.gives = nest('progress.html.render')
7
8exports.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