ScrollProgressJS/demo.html at main · SH20RAJ/ScrollProgressJS · 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
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Progress</title>
    <style>

        * {
            font-family: 'Courier New', Courier, monospace;
        }
        .content {
            min-height: 150vh;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- Your article content goes here -->
        <!-- This is just a placeholder -->
        <h1>Lorem Ipsum</h1>
        <hr>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id neque sed felis dictum fringilla.
            Phasellus non faucibus mi. Sed posuere nulla id justo lobortis, sed vestibulum eros convallis. Vivamus eget
            urna sed justo consectetur vulputate sed nec ipsum. Ut a orci vitae nisi ultricies finibus. Nulla facilisi.
            Integer luctus est nec libero consectetur, vel pellentesque metus varius. Donec sed orci sit amet ex
            efficitur efficitur non a felis.
        </p>
        <!-- Add more content as needed -->


    </div>
    <hr>
    <footer>
        <center>
            &copy; <a href="https://github.com/SH20RAJ/ScrollProgressJS/">ScrollProgressJS</a> by <a
                href="https://github.com/SH20RAJ/">SH20RAJ</a>

        </center>
    </footer>
    <hr>
    <script src="ScrollProgress.js" data-autoload="true"></script>
    <script>
        //Custom initialization
        ScrollProgress.init({
            color: 'hotpink',   // Progress bar color
            height: '4px',      // Progress bar height
            position: 'top'  // Progress bar position ('top' or 'bottom')
        });

        ScrollProgress.setConfig({
            color: 'red',   // Progress bar color
            height: '4px',      // Progress bar height
            position: 'top'  // Progress bar position ('top' or 'bottom')
        });

        // ScrollProgress.destroy()
    </script>

    <!-- Include the scrollLoader.js script -->
</body>

</html>