"loader"
Bootstrap 3.3.0 Snippet by imsachin

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body style="background:#ccc;">
<div class="container-fluid">
<div class="container" style="margin-top:10%;">
<div class="col-md-12" style="color:#fff;">
<div class="col-md-3"></div>
<div class="col-md-6 no-padding" style="background-color:#3a95a8; min-height:300px; border:solid 2px #3a95a8; border-radius:10px;"> <h3> Logo</h3>
<p style="border-bottom:dashed 1px #fff;"></p>
<p style="text-align:center; font-size:16px; padding-top:10px;">Your Patience is appreciated, while we are searching the lowest fare.</p>
<table width="100%">
<tr>
<td align="left" style="padding-left:10px;"><h3>Mumbai(BOM)</h3></td>
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 {display:flex;justify-content:center;align-items: center;overflow:hidden;animation-delay:1s; height:50px;}
.item-1 {width:20px;height:20px; background:#f583a1; border-radius:50%; background-color:#eed968;margin:7px; display:flex;justify-content:center;align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-1:before {content: ''; width:20px;height:20px;border-radius:50%;background-color:#eed968; opacity:0.7;animation:scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay:200ms;transition:0.5s all ease;
transform: scale(1);
}
.item-2 {width: 20px; height:20px; background:#f583a1; border-radius:50%; background-color:#eece68; margin:7px; display:flex; justify-content:center; align-items:center;}
@keyframes scale {
0% {
transform: scale(1);
}
50%,
75% {
transform: scale(2.5);
}
78%, 100% {
opacity: 0;
}
}
.item-2:before {
content: ''; width:20px; height:20px; border-radius:50%;
background-color:#eece68; opacity:0.7; animation: scale 2s infinite cubic-bezier(0, 0, 0.49, 1.02);animation-delay: 400ms;transition: 0.5s all ease;transform: scale(1);}
.item-3 { width:20px;height:20px;background:#f583a1;border-radius:50%;background-color:#eec368;margin:7px; display:flex;justify-content:center;align-items:center;}
@keyframes scale {
0% {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO React
Boll css loader

Questions / Comments: