ui/index.html at master · bitorjs/ui · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8"> <!-- 声明文档使用的字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"><!-- 为移动设备添加 viewport -->
  <meta name="description" content="不超过150个字符"/>       <!-- 页面描述 -->
  <meta name="keywords" content=""/>      <!-- 页面关键词 -->
  <meta name="author" content="name, email@gmail.com"/>    <!-- 网页作者 -->
  <meta name="robots" content="index,follow"/>      <!-- 搜索引擎抓取 -->
  <meta name="apple-mobile-web-app-title" content="标题"> <!-- iOS 设备 begin -->
  <meta name="apple-mobile-web-app-capable" content="yes"/>  <!-- 添加到主屏后的标题（iOS 6 新增） -->
  <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> <!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/> <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  <meta name="format-detection" content="telphone=no, email=no"/>  <!-- 设置苹果工具栏颜色 -->
  <meta name="renderer" content="webkit">  <!-- 启用360浏览器的极速模式(webkit) -->
  <meta name="HandheldFriendly" content="true">     <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
  <meta name="MobileOptimized" content="320">   <!-- 微软的老式浏览器 -->
  <meta name="screen-orientation" content="portrait">   <!-- uc强制竖屏 -->
  <meta name="x5-orientation" content="portrait">    <!-- QQ强制竖屏 -->
  <meta name="full-screen" content="yes">              <!-- UC强制全屏 -->
  <meta name="x5-fullscreen" content="true">       <!-- QQ强制全屏 -->
  <meta name="browsermode" content="application">   <!-- UC应用模式 -->
  <meta name="x5-page-mode" content="app">    <!-- QQ应用模式 -->
  <meta name="msapplication-tap-highlight" content="no">    <!-- windows phone 点击无高光 -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">     <!-- 避免IE使用兼容模式 -->
  <meta http-equiv="Cache-Control" content="no-siteapp" />    <!-- 不让百度转码 -->
  <meta http-equiv="pragma" content="no-cache"><!-- 设置页面不缓存 -->
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <style>
    .overflow-hidden {
      height: 100vh;
      width: 100vw;
      overflow: hidden;
    }

    .loader {
      position: absolute;
      top: 0px;
      bottom: 0px;
      left: 0px;
      right: 0px;
      margin: auto;
      width: 175px;
      height: 100px;
    }

    .loader span {
      display: block;
      background: #ccc;
      width: 7px;
      height: 10%;
      border-radius: 14px;
      margin-right: 5px;
      float: left;
      margin-top: 25%;
    }

    .loader span:last-child {
      margin-right: 0px;
    }

    .loader span:nth-child(1) {
      animation: load 2.5s 1.4s infinite linear;
    }

    .loader span:nth-child(2) {
      animation: load 2.5s 1.2s infinite linear;
    }

    .loader span:nth-child(3) {
      animation: load 2.5s 1s infinite linear;
    }

    .loader span:nth-child(4) {
      animation: load 2.5s 0.8s infinite linear;
    }

    .loader span:nth-child(5) {
      animation: load 2.5s 0.6s infinite linear;
    }

    .loader span:nth-child(6) {
      animation: load 2.5s 0.4s infinite linear;
    }

    .loader span:nth-child(7) {
      animation: load 2.5s 0.2s infinite linear;
    }

    .loader span:nth-child(8) {
      animation: load 2.5s 0s infinite linear;
    }

    .loader span:nth-child(9) {
      animation: load 2.5s 0.2s infinite linear;
    }

    .loader span:nth-child(10) {
      animation: load 2.5s 0.4s infinite linear;
    }

    .loader span:nth-child(11) {
      animation: load 2.5s 0.6s infinite linear;
    }

    .loader span:nth-child(12) {
      animation: load 2.5s 0.8s infinite linear;
    }

    .loader span:nth-child(13) {
      animation: load 2.5s 1s infinite linear;
    }

    .loader span:nth-child(14) {
      animation: load 2.5s 1.2s infinite linear;
    }

    .loader span:nth-child(15) {
      animation: load 2.5s 1.4s infinite linear;
    }

    @keyframes load {
      0% {
        background: #ccc;
        margin-top: 25%;
        height: 10%;
      }

      50% {
        background: #444;
        height: 100%;
        margin-top: 0%;
      }

      100% {
        background: #ccc;
        height: 10%;
        margin-top: 25%;
      }
    }
  </style>
</head>

<body>
  <div id="root">
    <div class="loader">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</body>

</html>