当前位置：网站首页>浏览器顶部loading(来自知乎)

浏览器顶部loading(来自知乎)

2022-07-01 03:34:00 【51CTO】
浏览器顶部loading(来自知乎)_浏览器顶部loading(来自知乎)
       
       <!DOCTYPE html>
       
       <
       
       html 
       
       lang=
       
       "en"
       
       >
       
       <
       
       head
       
       >
       
       <
       
       meta 
       
       charset=
       
       "UTF-8"
       
       >
       
       <
       
       meta 
       
       name=
       
       "viewport" 
       
       content=
       
       "width=device-width,height=device-height"
       
       >
       
       <
       
       title
       
       >浏览器顶部loading(来自知乎)
       
       </
       
       title
       
       >
       
       <
       
       style
       
       >
       
       .m-loading-bar {
       
       position: 
       
       fixed;
       
       top: 
       
       0;
       
       right: 
       
       0;
       
       left: 
       
       0;
       
       z-index: 
       
       101;
       
       display: 
       
       none;
       
       height: 
       
       2px;
       
       pointer-events: 
       
       none;
       
       background: 
       
       #0084FF;
       
       -webkit-
       
       transform: 
       
       translateX(
       
       -100%);
       
       transform: 
       
       translateX(
       
       -100%);
       
  }
       
       .m-loading-bar
       
       .active {
       
       display: 
       
       block;
       
       -webkit-
       
       animation: 
       
       LoadingBarForward 
       
       1s 
       
       ease-in-out 
       
       0.8s 
       
       infinite;
       
       animation: 
       
       LoadingBarForward 
       
       1s 
       
       ease-in-out 
       
       0.8s 
       
       infinite;
       
  }
       
       @-webkit-keyframes 
       
       LoadingBarForward {
       
       0% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       -100%);
       
       transform: 
       
       translateX(
       
       -100%);
       
    }
       
       40% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       0);
       
       transform: 
       
       translateX(
       
       0);
       
    }
       
       60% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       0);
       
       transform: 
       
       translateX(
       
       0);
       
    }
       
       100% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       100%);
       
       transform: 
       
       translateX(
       
       100%);
       
    }
       
  }
       
       @keyframes 
       
       LoadingBarForward {
       
       0% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       -100%);
       
       transform: 
       
       translateX(
       
       -100%);
       
    }
       
       40% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       0);
       
       transform: 
       
       translateX(
       
       0);
       
    }
       
       60% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       0);
       
       transform: 
       
       translateX(
       
       0);
       
    }
       
       100% {
       
       -webkit-
       
       transform: 
       
       translateX(
       
       100%);
       
       transform: 
       
       translateX(
       
       100%);
       
       </
       
       style
       
       >
       
       </
       
       head
       
       >
       
       <
       
       body
       
       >
       
       <
       
       div 
       
       class=
       
       "m-loading-bar active"
       
       >
       
       </
       
       div
       
       >
       
       </
       
       body
       
       >
       
       </
       
       html
       
       >
      
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.
原网站
版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://blog.51cto.com/xutongbao/5432669
当前位置：网站首页>浏览器顶部loading(来自知乎)

浏览器顶部loading(来自知乎)

边栏推荐

猜你喜欢

随机推荐
