Ajax Loader
HTML 
<input class="btn--play" type="checkbox"/>
1
<input class="btn--play" type="checkbox"/>
 
CSS 
$w:50px;
1
$w:50px;
2
$h:$w*1.2;
3
 
4
$color-icon:#eee;
5
 
6
$speed:300ms;
7
$ease: cubic-bezier(0.680, -0.550, 0.265, 1.650);
8
 
9
*{
10
  margin:0;
11
  padding:0;
12
}
13
 
14
html,
15
body{
16
  height:100%;
17
}
18
body{
19
  background:#1AAF5D;
20
}
21
 
22
.btn--play{
23
  cursor:pointer;
24
  position: absolute;
25
  width: $w;
26
  height: $h;
27
  top: 50%;
28
  left:50%;
29
  margin-top:-($h/2);
30
  margin-left:-($w/2);
31
  @include appearance(none);
32
  outline:0;
33
  border-style: solid;
34
  border-width: ($h/2) 0 ($h/2) $w;
35
  border-color: transparent transparent transparent $color-icon;
36
  @include transform-origin(50% 50%);
37
  @include backface-visibility(hidden);
38
  @include transition(all $speed ease);
39
  -moz-transform: scale(1.00005); /* hack Firefox smooth edge */
40
  &:hover{
41
    @include transform(scale(1.05));
42
  }
43
  &:checked{
44
    border-width: 0 ($h/3.5) 0 ($h/3.5);
45
    border-color: transparent $color-icon transparent $color-icon;
46
    @include transition(all $speed $ease);
47
  }
48
}
 
JavaScript 
/*
1
/*
2
  autor: Marco Barría
3
  https://twitter.com/marco_bf
4
*/
 

icon edge

CSSDeck G+