"Pure css loader and icon"
Pure CSS 0.6.2 Snippet by ankitsoni18

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<link href="//cdnjs.cloudflare.com/ajax/libs/pure/0.6.2/pure-min.css" rel="stylesheet" id="bootstrap-css">
<script src=""></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">
<h2 class="text-center">Pure html and css loader, with checkmark and cross icon</h2>
<div class="col-sm-12 contentarea text-center">
<p><span class="close"></span>Authentication </p>
<p><span class="check"></span>Fetching your account details </p>
<p><span class="close"></span>preparing your account </p>
<p><span class="spinner"></span>preparing dashboard</p>
</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
.spinner {
border: 2px solid #f3f3f3;
display: inline-block;
border-radius: 50%;
border-top: 2px solid #3498db;
width: 15px;
height: 15px;
position: relative;
top: 6px;
right: 6px;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.data{
padding-left: 15px;
}
.check{
display:inline-block;
padding-right: 12px;
}
.check:after{
content: '';
display: block;
width: 6px;
height: 11px;
border: solid #53b714;
border-width: 0 2px 2px 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro

Questions / Comments: