Ajax Loader
HTML 
<section>
1
<section>
2
  <h1>Setup your uploader</h1>
3
  <h2>inspired on @malcevicius dribbble</h2>
4
  <div class="wrapper-checkbox">
5
    <div class="checkbox">
6
      <div class="figure-container">
7
        <div class="figure face"></div>
8
      </div>
9
      <div class="text">
10
        <span>Harry Roberts</span>
11
      </div>
12
    </div>
13
    <div class="checkbox">
14
      <div class="figure-container">
15
        <div class="figure face"></div>
16
      </div>
17
      <div class="text">
18
        <span>Eric Hoffman</span>
19
      </div>
20
    </div>
21
 
22
    <div class="checkbox">
23
      <div class="figure-container">
24
        <div class="figure face"></div>
25
      </div>
26
      <div class="text">
27
        <span>Adham Dannaway</span>
28
    
29
      </div>
30
    </div>
31
 
32
    <div class="checkbox">
33
      <div class="figure-container">
34
        <div class="figure face"></div>
35
      </div>
36
      <div class="text">
37
        <span>Katelyn Friedson</span>
38
      </div>
39
    </div>
40
  
41
    <div class="submit">
42
      <div class="text">
43
        <span>Add these blogs</span>
44
      </div>
45
    </div>
46
  </div>
47
</section>
48
 
49
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,500,200);
1
@import url(http://fonts.googleapis.com/css?family=Raleway:400,300,500,200);
2
@import url(http://weloveiconfonts.com/api/?family=entypo);
3
4
$background:#373a43;
5
$buttonBg:#fff;
6
$textColor:#777e86;
7
$boxShadow:#252730;
8
$buttonBg2:#30c076;
9
 
10
@mixin breakpoint($point) {
11
  @if $point == papa-bear {
12
    @media (max-width: 1600px) { @content; }
13
  }
14
  @else if $point == mama-bear {
15
    @media (max-width: 1250px) { @content; }
16
  }
17
  @else if $point == brother-bear {
18
    @media (max-width: 850px)  { @content; }
19
  }
20
  @else if $point == baby-bear {
21
    @media (max-width: 450px)  { @content; }
22
  }
23
}
24
 
25
*{
26
box-sizing:border-box;
27
}
28
html{background:$background;
29
color:$textColor;
30
font-family: 'Raleway', sans-serif;
31
}
32
 
33
h1,h2 {
34
  color:$textColor;
35
  font-family: 'Raleway', sans-serif;
36
  font-weight:200;    
37
}
38
h1 {font-size:2em; margin-bottom:1em;}  
39
h2 {font-size:0.9em; margin-bottom:2em;}  
40
 
41
section{
42
  width:50%;
43
  margin:100px auto;
44
  text-align:center;
45
  @include breakpoint(papa-bear) { width: 50%; }
46
  @include breakpoint(mama-bear) { width: 70%; }
47
  @include breakpoint(brother-bear) { width: 90%; }
48
49
}
50
 
51
.checkbox {
52
  height: 70px;
53
  width: 45%;
54
  position: relative;
55
  background:$buttonBg;
56
  display: inline-block;
57
  margin: 15px 2% 15px;
58
  border-radius: 2px;
59
  box-shadow: 0px 0px 0 1px $boxShadow;
60
  cursor:pointer;
61
  @include breakpoint(brother-bear) { width: 80%; }
62
  &:hover {
63
  background:$buttonBg2;
64
  color:white;
65
  }
66
  &:nth-child(1){
67
    .face {         background:url('https://s3.amazonaws.com/uifaces/faces/twitter/csswizardry/73.jpg');
68
background-size:cover;    
69
    }
70
   }
71
  &:nth-child(2){
72
    .face {         background:url('https://s3.amazonaws.com/uifaces/faces/twitter/kolage/73.jpg');
73
background-size:cover;    
74
    }
75
   }
76
  &:nth-child(3){
77
    .face {         background:url('https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/73.jpg');
78
background-size:cover;    
79
    }
80
   }
81
  &:nth-child(4){
82
    .face {         background:url('https://s3.amazonaws.com/uifaces/faces/twitter/kfriedson/73.jpg');
83
background-size:cover;    
84
    }
85
   }
86
 }
87
88
 .figure-container {
89
 width: 20%;
90
 height: 100%;
91
 float: left;
92
 padding: 10px 0 10px 15px;
93
    @include breakpoint(baby-bear) { width: 30%; }
94
  .figure{
95
    background:transparent;
96
    width: 50px;
97
    height: 50px;
98
    border-radius: 50%;
99
    box-shadow:0 0 0 2px white;
100
    }
101
102
 }
103
.text {
104
  width: 80%;
105
  height: 100%;
106
  margin-left: 20%;
107
  text-align: left;
108
  position: relative;
109
  padding: 30px 10px;
110
  @include breakpoint(baby-bear) { width: 70%; margin-left: 30%;  }
111
  span {
112
    position: absolute;
113
    left:10px;
114
   }
115
 }    
116
    
117
 .submit {
118
 width: 60%;
119
 height: 60px;
120
 margin: 30px auto;
121
 background: $buttonBg2;
122
 border-radius: 2px;
123
 box-shadow: 0px 0px 0 1px $boxShadow;
124
 cursor:pointer;
125
 .text{
126
  width: 100%;
127
  height: 100%;
128
  margin: 0;
129
  padding: 20px;
130
  text-align: center;
131
     span {
132
      position:relative;
133
      text-align: center;
134
      color: white
135
      }
136
  }
137
   &:hover{background:darken($buttonBg2,5%)}
138
 }  
139
 
140
.clicked{
141
  background:$buttonBg2 !important;
142
  color:white;
143
}
144
 
145
[class*="entypo-"]:before {
146
  font-family: 'entypo', sans-serif;
147
  font-size:2.3em;
148
  line-height:50px;
149
}
150
 
 
JavaScript 
$('.checkbox').on('click', function(){
1
$('.checkbox').on('click', function(){
2
3
   if($(this).find('.figure-container div').hasClass('clicked'))
4
     {
5
      
6
       $(this).find('.figure-container div').addClass('face').removeClass('entypo-check clicked').animate('slow');
7
      
8
     }else{
9
    
10
   $(this).find('.figure-container div').removeClass('face').addClass('entypo-check clicked').animate('slow');
11
    }
12
});
 

Responsive Custom checkbox

CSSDeck G+