JSDM

HTML

3
 
1
<div class="loader">
2
  <i class="grey"></i>
3
</div>
!

CSS

​x
 
1
html, body {
2
  position: absolute;
3
  top: 0;
4
  left: 0;
5
  width: 100%;
6
  height: 100%;
7
  overflow: hidden;
8
  background-color: #222d38;
9
}
10
​
11
.loader {
12
  position: absolute;
13
  font-size: 0;
14
  line-height: 0;
15
  top: 50%;
16
  margin-top: -6px;
17
  right: 0;
18
  left: 0;
19
  height: 12px;
20
}
21
.loader i {
22
  width: 100%;
23
  position: absolute;
24
  top: 0;
25
  left: 0;
26
  height: 12px;
27
  display: inline-block;
28
  background-color: transparent;
29
}
30
.loader i:before, .loader i:after {
31
  content: "";
32
  width: 50%;
33
  height: 100%;
34
  position: absolute;
35
}
36
.loader i:before {
37
  -webkit-animation: slideLeft 1s 1s both cubic-bezier(0.34, 0.13, 0.14, 0.99);
38
  animation: slideLeft 1s 1s both cubic-bezier(0.34, 0.13, 0.14, 0.99);
39
  left: 0;
40
}
41
.loader i:after {
42
  -webkit-animation: slideRight 1s 1s both cubic-bezier(0.34, 0.13, 0.14, 0.99);
43
  animation: slideRight 1s 1s both cubic-bezier(0.34, 0.13, 0.14, 0.99);
44
  right: 0;
45
}
46
.loader i.grey:before, .loader i.grey:after {
47
  background-color: #38434e;
48
}
49
.loader i.red:before, .loader i.red:after {
50
  background-color: #ff5a69;
51
}
52
.loader i.green:before, .loader i.green:after {
53
  background-color: #b4ff78;
54
}
55
.loader i.blue:before, .loader i.blue:after {
56
  background-color: #5fb4ff;
57
}
58
.loader i.yellow:before, .loader i.yellow:after {
59
  background-color: #ffff82;
60
}
61
.loader i.purple:before, .loader i.purple:after {
62
  background-color: #c8affa;
63
}
64
​
65
@-webkit-keyframes slideLeft {
66
  0% {
67
    -ms-transform: translate(0, 0);
68
    -webkit-transform: translate(0, 0);
69
    transform: translate(0, 0);
70
  }
71
  100% {
72
    -ms-transform: translate(-100%, 0);
73
    -webkit-transform: translate(-100%, 0);
74
    transform: translate(-100%, 0);
75
  }
76
}
77
​
78
@keyframes slideLeft {
79
  0% {
80
    -ms-transform: translate(0, 0);
81
    -webkit-transform: translate(0, 0);
82
    transform: translate(0, 0);
83
  }
84
  100% {
85
    -ms-transform: translate(-100%, 0);
86
    -webkit-transform: translate(-100%, 0);
87
    transform: translate(-100%, 0);
88
  }
89
}
90
@-webkit-keyframes slideRight {
91
  0% {
92
    -ms-transform: translate(0, 0);
93
    -webkit-transform: translate(0, 0);
94
    transform: translate(0, 0);
95
  }
96
  100% {
97
    -ms-transform: translate(100%, 0);
98
    -webkit-transform: translate(100%, 0);
99
    transform: translate(100%, 0);
100
  }
101
}
102
@keyframes slideRight {
103
  0% {
104
    -ms-transform: translate(0, 0);
105
    -webkit-transform: translate(0, 0);
106
    transform: translate(0, 0);
107
  }
108
  100% {
109
    -ms-transform: translate(100%, 0);
110
    -webkit-transform: translate(100%, 0);
111
    transform: translate(100%, 0);
112
  }
113
}
114
​
!
?   ?  
?   ?  
必须是有效的URL
+ 添加另一个资源

JS

49
 
1
class Loader
2
3
  loaded: 0
4
  total: 100
5
  lastPicked: [ "grey" , "grey" , "grey" ]
6
  colors: [
7
    "red"
8
    "green"
9
    "blue"
10
    "yellow"
11
    "purple"
12
  ]
13
14
  start: ->
15
    @.getElements()
16
    @.addListeners()
17
  
18
  getElements: ->
19
    @.el = document.getElementsByClassName("loader")[0]
20
  
21
  addListeners: ->
22
    @.loadSim = setInterval =>
23
      @.loaded += 1 + Math.floor( Math.random() * 5 )
24
    , 200
25
  
26
    @.loadCheck = setInterval =>
27
      if @.loaded < @.total
28
        @.addBanner()
29
      else
30
        clearInterval( @.loadSim )
31
        clearInterval( @.loadCheck )
32
    , 200
33
  
34
  addBanner: =>
35
    banner = document.createElement("i")
36
    color = @.lastPicked[0]
37
    while @.lastPicked.indexOf( color ) isnt -1
38
      color = @.colors[ Math.floor( Math.random() * @.colors.length)]
39
    @.lastPicked.unshift( color )
40
    @.lastPicked.pop()
41
  
42
    banner.setAttribute( "class" , color )
43
    @.el.insertBefore( banner , @.el.children[0] )
44
  
45
    while @.el.children.length > 12
46
      @.el.removeChild( @.el.children[12] )
47
  
48
App = new Loader
49
App.start()
!
必须是有效的URL
+ 添加另一个资源
Close

文件管理 点击文件查看URL

图片

  1. 暂无文件

CSS

  1. 暂无文件

JavaScript

  1. 暂无文件

其他

  1. 暂无文件
拖动文件到上面的区域或者:
加载中 ..................