git ssb

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