This repository has been archived by the owner on Jul 13, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 44
/
index.src.html
126 lines (117 loc) · 4.48 KB
/
index.src.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
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
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>LTT</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
html,body{ background: #f6f6f6; }
.appStartingMsg{
position: fixed;
top:0;
left:0;
bottom: 0;
right: 0;
z-index: 13000;
background-color: #f6f6f6;
}
.appStartingMsg .progress {
width: 200px;
height: 26px;
border: solid 4px #85DFBE;
border-radius: 10px;
position: relative;
padding: 3px 4px;
}
.appStartingMsg .progress .bar{
height: 100%;
background: #7FDFBC;
border-radius: 3px;
width:0%;
-webkit-transition: 0.4s linear;
-moz-transition: 0.4s linear;
-o-transition: 0.4s linear;
transition: 0.4s linear;
-webkit-transition-property: width, background-color;
-moz-transition-property: width, background-color;
-o-transition-property: width, background-color;
transition-property: width, background-color;
}
.appStartingMsg-fade {
transition: all 300ms linear 700ms;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
opacity: 1;
}
.appStartingMsg-fade.out {
opacity: 0;
}
</style>
<script type="text/javascript" src="./load.js"></script>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<div class="Aligner appStartingMsg appStartingMsg-fade out">
<div class="Aligner-item">
<div class="progress">
<div class="bar"></div>
</div>
</div>
</div>
<section id="app-container"></section>
<script src="libs/ace/ace.js"></script>
<script src="libs/ace/ext-language_tools.js"></script>
<script src="libs/timelinejs/js/storyjs-embed.js"></script>
<script type="text/javascript">
(function (window) {
'use strict';
var appStartingMsgDOM = document.querySelector('.appStartingMsg');
appStartingMsgDOM.classList.remove('out');
var progressBar = document.querySelector('.progress .bar');
var _progress = 0;
window.Ltt = {
setProgress: function (progress) {
_progress = progress;
progressBar.style.width = _progress + '%';
if (_progress === 100) {
var timer = setTimeout(function () {
appStartingMsgDOM.classList.add('out');
clearTimeout(timer);
timer = setTimeout(function () {
$('.appStartingMsg').hide();
clearTimeout(timer);
}, 1000);
}, 2500);
}
}
};
loadJS([
"nw/initNw.js",
"vendors.js",
"main.js"
], {
onProgress: function (progress) {
Ltt.setProgress(progress * 100 -20);
},
onComplete: function () {
console.log('done!');
}
});
/*function updateProgress() {
console.log('update progress' + _progress);
if (_progress < 100) {
requestAnimationFrame(updateProgress);
} else {
console.log('update progress finish' + _progress);
}
}
requestAnimationFrame(updateProgress);*/
})(window);
</script>
</body>
</html>