nprogresse/examples/simple.html at master · AkatQuas/nprogresse · 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Simple NprogressE</title>
    <style>
      html {
        font-size: 16px;
      }
      .container {
        width: 800px;
        margin: 0 auto;
      }
      .card {
        padding: 0.5rem;
        margin-bottom: 1.5rem;
        border: 1px solid #888;
        border-radius: 4px;
      }
      .card .title {
        font-weight: bold;
        padding: 0.5rem 0;
        font-size: 1.5rem;
      }
      .card .bar {
        padding: 0.25rem 0;
      }
      .card .actions {
        padding: 0.5rem 0;
      }
      .card .actions button {
        padding: 0.25rem 0.5rem;
        margin-right: 0.25rem;
      }
    </style>
    <link rel="stylesheet" href="../style.css" />
    <script src="../index.js"></script>
    <script>
      // hacking here
      window.NProgressEConstructor = window.NProgressE.__proto__.constructor;
    </script>
  </head>

  <body>
    <div class="container">
      <div class="card" id="done">
        <div class="title">Usage: <code>nprogresse.done()</code></div>
        <div class="bar"></div>
      </div>
      <script>
        {
          const done = new NProgressEConstructor();
          done.configure({
            parent: '#done .bar',
          });
          function once() {
            done.start();
            setTimeout(() => {
              done.done();
            }, 3000);
          }
          setInterval(once, 5000);
          once();
        }
      </script>
      <div class="card" id="error">
        <div class="title">Usage: <code>nprogresse.error()</code></div>
        <div class="bar"></div>
      </div>
      <script>
        {
          const error = new NProgressEConstructor();
          error.configure({
            parent: '#error .bar',
          });
          function once() {
            error.start();
            setTimeout(() => {
              error.error();
            }, 2000);
          }
          setInterval(once, 4000);
          once();
        }
      </script>
      <div class="card" id="interactive">
        <div class="title">Interactive</div>
        <div class="bar"></div>
        <div class="actions">
          <button action="start">Start()</button>
          <button action="restart">Restart()</button>
          <button action="done">Done()</button>
          <button action="error">Error()</button>
          <button action="spin" disabled>
            spinner in not avaliable in custom parent element
          </button>
        </div>
      </div>
      <script>
        {
          function registerCallback(action, callback) {
            const el = document.querySelector(
              `#interactive .actions [action="${action}"]`
            );
            el.addEventListener('click', callback);
          }
          const interactive = new NProgressEConstructor();
          interactive.configure({
            parent: '#interactive .bar',
          });
          registerCallback('start', () => {
            interactive.start();
          });
          registerCallback('restart', () => {
            interactive.set(0);
          });
          registerCallback('done', () => {
            interactive.done();
          });
          registerCallback('error', () => {
            interactive.error();
          });
        }
      </script>
    </div>
  </body>
</html>