“NProgress CSS” Kode Jawaban

NProgress CSS

1/* Make clicks pass-through */
 2#nprogress {
 3  pointer-events: none;
 4}
 5
 6#nprogress .bar {
 7  background: #29d;
 8
 9  position: fixed;
10  z-index: 100;
11  top: 0;
12  left: 0;
13
14  width: 100%;
15  height: 2px;
16}
17
18/* Fancy blur effect */
19#nprogress .peg {
20  display: block;
21  position: absolute;
22  right: 0px;
23  width: 100px;
24  height: 100%;
25  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
26  opacity: 1.0;
27
28  -webkit-transform: rotate(3deg) translate(0px, -4px);
29      -ms-transform: rotate(3deg) translate(0px, -4px);
30          transform: rotate(3deg) translate(0px, -4px);
31}
32
33/* Remove these to get rid of the spinner */
34#nprogress .spinner {
35  display: block;
36  position: fixed;
37  z-index: 100;
38  top: 15px;
39  right: 15px;
40}
41
42#nprogress .spinner-icon {
43  width: 18px;
44  height: 18px;
45  box-sizing: border-box;
46
47  border: solid 2px transparent;
48  border-top-color: #29d;
49  border-left-color: #29d;
50  border-radius: 50%;
51
52  -webkit-animation: nprogress-spinner 400ms linear infinite;
53          animation: nprogress-spinner 400ms linear infinite;
54}
55
56@-webkit-keyframes nprogress-spinner {
57  0%   { -webkit-transform: rotate(0deg); }
58  100% { -webkit-transform: rotate(360deg); }
59}
60@keyframes nprogress-spinner {
61  0%   { transform: rotate(0deg); }
62  100% { transform: rotate(360deg); }
63}
64