"Preloader : Demo3"
Bootstrap 3.0.0 Snippet by napsterbd

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="container">
<div class="row">
<div class="col-md-12">
<div class="loader">
<div class="loader-inner-1"></div>
<div class="loader-inner-2"></div>
<div class="loader-inner-3"></div>
<div class="loader-inner-4"></div>
<div class="loader-inner-5"></div>
<div class="loader-inner-6"></div>
<div class="loader-inner-7"></div>
<div class="loader-inner-8"></div>
<div class="loader-inner-9"></div>
<div class="loader-inner-10"></div>
</div>
</div>
</div>
</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
.loader{
width: 100px;
height: 100px;
position: relative;
margin: 40px auto;
}
.loader > div{
background: transparent;
border: 4px solid transparent;
border-color: transparent transparent transparent #152861;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate"("-50%, -50%")";
-moz-transform: translate"("-50%, -50%")";
-ms-transform: translate"("-50%, -50%")";
-o-transform: translate"("-50%, -50%")";
transform: translate"("-50%, -50%")";
-webkit-transform: translate(-50%, -50%) rotate(0);
-moz-transform: translate(-50%, -50%) rotate(0);
-ms-transform: translate(-50%, -50%) rotate(0);
-o-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
-webkit-animation: loading 2s infinite ease-in-out;
-moz-animation: loading 2s infinite ease-in-out;
-o-animation: loading 2s infinite ease-in-out;
animation: loading 2s infinite ease-in-out;
}
.loader .loader-inner-1{
width: 20px;
height: 20px;
-webkit-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System

Questions / Comments: