"load"
Bootstrap 3.3.0 Snippet by evarevirus

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--<div class="card effect-1">
<div class="hover-rect lighteryellow"></div>
</div>-->
<div class="loader">
<div class="pile small"></div>
<div class="pile middle"></div>
<div class="pile big"></div>
<div class="loader-text">Lade Daten..</div>
</div>
<div class="loader-back"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
div.loader {
background-color: transparent;
height: auto;
min-height: 40px;
/* vertical-align:bottom; */
position: absolute;
top: 48%;
left: 48%;
z-index: 10000;
}
div.loader .pile {
transform: skew(-45deg);
transform-origin: 100% 100%;
background-color: #999;
width: 15px;
border-radius: 1px;
display: inline-block;
/*position:relative;
bottom:0;
left:auto;
vertical-align:bottom;*/
}
div.loader .pile.small {
animation: pile1 0.3s 0.4s ease 1 forwards, fadein2 1s 1s linear infinite;
}
div.loader .pile.middle {
/*height:25px;
background-color:#F6CA6B;*/
animation: pile2 0.4s 0.2s ease 1 forwards, fadein2 1s 1.2s linear infinite;
}
div.loader .pile.big {
/*height:40px;
background-color:#F3AE02;*/
animation: pile3 0.5s ease 1 forwards, fadein2 1s 1.4s linear infinite;
}
div.loader .loader-text {
color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Kit 2 PRO
Fancy subscribe modal (md, lg) with delay functionality on page load

Questions / Comments: