progress-bar/script.js at master · Programmer213-web/progress-bar · 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
var stage = 1;
var percent;
$('.next').on('click', () => {
    $('.message').css("opacity", "0");
    $('.message').css('transform', 'none');
    if(stage != 0)
    {
        var percent = (stage / 4) * 100;
        $('.bar').css(`background-image`, `linear-gradient(to right, lightblue ${percent}%, lightyellow ${percent}%)`);
        if(stage != 4)
        {
            let idin = '#stage' + stage;
            $(idin).css('transform', 'scale(2.5)');
            $(idin).css('box-shadow', '0 3px 3px grey');
            $(idin).css('background-color', 'lightgreen');
        }
    }
    else{
        $('.bar').css('background-image', `none`);
        for(let iterator = 1; iterator < 4; iterator++)
            {
                let id = '#stage' + iterator;
                $(id).css('transform', 'scale(1.8)');
                $(id).css('box-shadow', 'none');
                $(id).css('background-color', 'darkblue');
            }
    }
    if(stage == 4)
    {
        $('.bar').css('background-image', 'linear-gradient(to right, yellow, green)');
        $('.message').css('opacity', '1');
        $('.message').css('transform', 'scale(2)');
        stage = -1;
    }
    stage++;
});

$('.back').on('click', () => {
    $('.message').css("opacity", "0");
    $('.message').css('transform', 'none');
    if(stage != 0)
        stage--;
    else if(stage == 0)
        stage = 4;
    if(stage != 0 && stage != 4)
    {
        let id = '#stage' + stage;
        let value = ((stage - 1) / 4) * 100;
        $(id).css('transform', 'scale(1.8)');
        $(id).css('box-shadow', 'none');
        $(id).css('background-color', 'darkblue');
        $('.bar').css('background-image', `linear-gradient(to right, lightblue ${value}%, lightyellow ${value}%`)
    }
    else if(stage == 4)
    {
        let value = ((stage) / 4) * 100;
        $('.bar').css('background-image', `linear-gradient(to right, lightblue ${value}%, lightyellow ${value}%)`);
    }
    if(stage == 1)
    {
        $('.bar').css('background-image', 'none');
    }
});