Ajax Loader
×
HTML 
<h1>IOS<span>7</span> <span>switcher</span> style</h1>
1
<h1>IOS<span>7</span> <span>switcher</span> style</h1>
2
<h6>Use chrome for best experience</h6>
3
<div id="content">
4
  <input type="checkbox" class="check" id="one"  name="check_one" />
5
  <label for="one"><div id="thumb"></div>
6
    <span>Made by <a href="https://twitter.com/LukyVJ">LukyVj</a></span></label>
7
</div>  
8
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
 
CSS 
body{
1
body{
2
background:#fafafa;
3
}
4
*{
5
box-sizing:border-box;
6
font-family:helvetica Neue;
7
font-weight:100;
8
text-align:center;
9
-webkit-font-smoothing:antialiased;
10
}
11
::selection{
12
background:transparent;
13
}
14
P{
15
text-align:center;
16
}
17
h1{
18
font-size:3.4em;
19
}
20
h1 span:first-child{
21
font-size:1.3em;
22
    background: -webkit-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
23
        background-size:35px;
24
/*background-clip*/
25
-webkit-background-clip:text;
26
        background-clip:text;
27
-webkit-text-fill-color:transparent;
28
}
29
#content{
30
width:50px;
31
margin:180px auto;
32
}
33
label:before{
34
content:'';
35
display:block;
36
width:50px;
37
height:30px;
38
/*border-radius*/
39
-webkit-border-radius:100px;
40
   -moz-border-radius:100px;
41
        border-radius:100px;
42
border:1px solid #ccc;
43
/*box-shadow*/
44
-webkit-box-shadow:inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
45
   -moz-box-shadow:inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
46
        box-shadow:inset 0 4px 0px rgba(0,0,0,.05), 0 0px 1px rgba(255,255,255,.8),0 1px 2px #fff;
47
position:relative;
48
z-index:-1;
49
padding:1px;
50
}
51
label:before{
52
background:#fff;
53
/*box-shadow*/
54
-webkit-box-shadow:inset 0 0 0 0px #ccc;
55
   -moz-box-shadow:inset 0 0 0 0px #ccc;
56
        box-shadow:inset 0 0 0 0px #ccc;
57
}
58
#one:checked ~ label[for=one]:before{
59
background:#fff;
60
/*box-shadow*/
61
-webkit-box-shadow:inset 0 0 0 10px #ccc;
62
   -moz-box-shadow:inset 0 0 0 10px #ccc;
63
        box-shadow:inset 0 0 0 10px #ccc;
64
}
65
#one:checked ~ label[for=one].on:before{
66
background:#4bd663;
67
/*box-shadow*/
68
-webkit-box-shadow:inset 0 0 0 10px #4bd663;
69
   -moz-box-shadow:inset 0 0 0 10px #4bd663;
70
        box-shadow:inset 0 0 0 10px #4bd663;
71
}
72
#two:checked ~ label[for=two]:before{
73
background:#fff;
74
/*box-shadow*/
75
-webkit-box-shadow:inset 0 0 0 10px #ccc;
76
   -moz-box-shadow:inset 0 0 0 10px #ccc;
77
        box-shadow:inset 0 0 0 10px #ccc;
78
}
79
#two:checked ~ label[for=two].on:before{
80
background:#4bd663;
81
/*box-shadow*/
82
-webkit-box-shadow:inset 0 0 0 10px #4bd663;
83
   -moz-box-shadow:inset 0 0 0 10px #4bd663;
84
        box-shadow:inset 0 0 0 10px #4bd663;
85
}
86
/* 1 -Hide the inputs */
87
input[type=checkbox]{
88
display:none;
89
}
90
/* 2 -Prepare labels */
91
#thumb{
92
content:'';
93
height:28px;
94
display:block;
95
float:left;
96
width:28px;
97
padding:0px;
98
margin:-31px 3px;
99
/*border-radius*/
100
-webkit-border-radius:100px;
101
   -moz-border-radius:100px;
102
        border-radius:100px;
103
/*linear-gradient*/
104
background:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f5f5f5));
105
background:-webkit-linear-gradient(#fff,#f5f5f5);
106
background:   -moz-linear-gradient(#fff,#f5f5f5);
107
background:     -o-linear-gradient(#fff,#f5f5f5);
108
background:        linear-gradient(#fff,#f5f5f5);
109
/*box-shadow*/
110
-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.1);
111
   -moz-box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.1);
112
        box-shadow:0 0 0 1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.1);
113
position:absolute;
114
z-index:1;
115
}
116
/* 3 -Prepare the fonts ? */
117
label{
118
display:block;
119
margin:8px 0;
120
}
121
/* Now, make it move */
122
#one:checked ~ label[for=one] #thumb{
123
margin:-31px 23px;
124
/*transition*/
125
-webkit-transition:margin .2s ease .2s;
126
   -moz-transition:margin .2s ease .2s;
127
     -o-transition:margin .2s ease .2s;
128
        transition:margin .2s ease .2s;
129
}
130
label:before,
131
#thumb,
132
#one:checked ~ label[for=one]:before{
133
/*transition*/
134
-webkit-transition:all .2s ease, box-shadow .2s ease .1s;
135
   -moz-transition:all .2s ease, box-shadow .2s ease .1s;
136
     -o-transition:all .2s ease, box-shadow .2s ease .1s;
137
        transition:all .2s ease, box-shadow .2s ease .1s;
138
}
139
/*special*/
140
a{
141
color:transparent;
142
text-decoration:none;
143
}
144
label span{
145
position:absolute;
146
font-size:1.5em;
147
left:0;
148
right:0;
149
top:60%;
150
color:transparent;
151
/*transition*/
152
-webkit-transition:all .2s ease .3s;
153
   -moz-transition:all .2s ease .3s;
154
     -o-transition:all .2s ease .3s;
155
        transition:all .2s ease .3s;
156
}
157
#one:checked ~ label[for=one] span,
158
#one:checked ~ label[for=one] span a{
159
color:#000 !important;
160
/*transition*/
161
-webkit-transition:all .2s ease .3s;
162
   -moz-transition:all .2s ease .3s;
163
     -o-transition:all .2s ease .3s;
164
        transition:all .2s ease .3s;
165
}
166
#one:checked ~ label[for=one] span a{
167
  background: -webkit-linear-gradient(-65deg, #25d38b 0%, #25d38b 20%, #1142cd 44%, #0b8cea 49%, #d83dbd 74%, #db315e 100%);
168
        background-size:35px;
169
/*background-clip*/
170
-webkit-background-clip:text;
171
        background-clip:text;
172
-webkit-text-fill-color:transparent;
173
}
174
#one:checked ~ label[for=one] span a:hover{
175
border-bottom:1px dotted #000;
176
padding-bottom:5px;
177
/*transition*/
178
-webkit-transition:all 0s ease;
179
   -moz-transition:all 0s ease;
180
     -o-transition:all 0s ease;
181
        transition:all 0s ease;
182
}
183
 
 
JavaScript 
//Big thanks to Kushagra
1
//Big thanks to Kushagra
2
$("#one").change(function(){
3
  var ele = $('#one').next('label[for="one"]');
4
  setTimeout(function() {
5
    if(ele.hasClass("on"))
6
      ele.removeClass("on");
7
    else
8
      ele.addClass("on");
9
  }, 200)
10
});
 

Untitled

CSSDeck G+