iGrad/firstmain_progress.js at master · cra16/iGrad · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98


    var target1=$('#t1').val();
    var base1=$('#b1').val();

    var circle1_1 = new ProgressBar.Circle('#maincircle_1', { //노랑
        color: '#cc0006',
        strokeWidth: 9,
        trailWidth: 9,
        trailColor: '#B4B4DC',
        duration: 1500,

        text: {
            value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * base1).toFixed(0)+"/"+base1);
    }

    });
    circle1_1.path.setAttribute('stroke-linecap', 'round');
    circle1_1.animate(1/base1*target1);


    var target2=$('#t2').val();
    var base2=$('#b2').val();

    var circle2_1 = new ProgressBar.Circle('#maincircle_2', { //노랑
        color: '#Ff3366',
        strokeWidth: 9,
        trailWidth: 9,
        trailColor: '#B4B4DC',
        duration: 1500,

        text: {
            value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * base2).toFixed(0)+"/"+base2);
    }

    });
    circle2_1.path.setAttribute('stroke-linecap', 'round');
    circle2_1.animate(1/base2*target2);


    var target3=$('#t3').val();
    var base3=$('#b3').val();

    var circle3_1 = new ProgressBar.Circle('#maincircle_3', { //노랑
        color: '#Ff0066',
        strokeWidth: 9,
        trailWidth: 9,
        trailColor: '#B4B4DC',
        duration: 1500,

        text: {
            value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * base3).toFixed(0)+"/"+base3);
    }

    });
    circle3_1.path.setAttribute('stroke-linecap', 'round');
    circle3_1.animate(1/base3*target3);


    var total=$('#total').val();
    var base=$('#totalbase').val();

    var circle4 = new ProgressBar.Circle('#example-percent-container4', { //노랑
        color: '#black',
        strokeWidth: 10,
        trailWidth: 10,
        trailColor: 'transparent',
        duration: 1500,

        text: {
            value: '0'
    },
    step: function(state, bar) {
        bar.setText((bar.value() * base).toFixed(0));
    }

    });
    circle4.path.setAttribute('stroke-linecap', 'round');
    circle4.animate(1/base*total);