Ajax Loader
×
HTML 
.container
1
.container
2
  table
3
    thead
4
      tr
5
        th
6
          | Name
7
          .sort
8
        th
9
          | Position
10
          .sort
11
        th
12
          | Office
13
          .sort
14
 
15
 
16
script  src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"
17
 
18
script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"
19
 
 
CSS 
@import "nib"
1
@import "nib"
2
 
3
easeInOutSine = cubic-bezier(0.445, 0.050, 0.550, 0.950)
4
easeOutBack   = cubic-bezier(0.250,-0.250, 0.750, 1.250)
5
 
6
sw = 2px
7
ss = 3px
8
fc = #411026
9
sc = fc + 80%
10
sh = fc + 30%
11
sa = fc + 10%
12
bc = fc + 70%
13
od = fc + 99%
14
ev = fc + 97%
15
ea = easeOutBack
16
du = .2s
17
 
18
.dataTables_filter
19
.dataTables_processing
20
.dataTables_length
21
.dataTables_info
22
.dataTables_paginate
23
  display none !important
24
 
25
table
26
  width 100%
27
  box-shadow 0 2px 50px 0 rgba(#000, .5)
28
  border 1px solid bc
29
  border-radius 2px
30
 
31
th
32
  font-weight 500
33
  cursor pointer
34
  position relative
35
  border-right 1px solid bc
36
  border-bottom 1px solid bc
37
  box-shadow 0 1px 0 bc inset
38
  line-height 30px
39
  background linear-gradient(top, od, ev)
40
  outline none
41
  &:last-child
42
    border-right none
43
 
44
.sort
45
  right 10px
46
  top 50%
47
  width sw
48
  height sw
49
  background sc
50
  border-radius 50%
51
  transition box-shadow du ea, transform du ea
52
  position absolute
53
  transform translate((-.5 * sw), (-.5 * sw))
54
  transform translate3d((-.5 * sw), (-.5 * sw), 0)
55
  box-shadow 0 0 sc, 0 0 sc, 0 0 sc, 0 0 sc, 0 0 sc, 0 0 sc, 0 0 sc, 0 0 sc
56
 
57
th:hover .sort
58
  background sh
59
  transform translate((-.5 * sw), (-.5 * sw))
60
  transform translate3d((-.5 * sw), (-.5 * sw), 0)
61
  box-shadow (-2 * ss) 0 sh, 0 0 sh, 0 (-2 * ss) sh, 0 0 sh, (2 * ss) 0 sh, 0 0 sh, 0 0 sh, 0 (2 * ss) sh
62
 
63
th.sorting_asc
64
  .sort
65
  &:hover .sort
66
    background sa
67
    transform translate((-.5 * sw), (-.5 * sw + ss))
68
    transform translate3d((-.5 * sw), (-.5 * sw + ss), 0)
69
    box-shadow (-2 * ss) 0 sa, (-1 * ss) 0 sa, (-1 * ss) (-1 * ss) sa, 0 (-1 * ss) sa, 0 (-2 * ss) sa, ss 0 sa, ss (-1 * ss) sa, (2* ss) 0 sa
70
 
71
th.sorting_desc
72
  .sort
73
  &:hover .sort
74
    background sa
75
    transform translate((-.5 * sw), (-.5 * sw - ss))
76
    transform translate3d((-.5 * sw), (-.5 * sw - ss), 0)
77
    box-shadow (-2 * ss) 0 sa, (-1 * ss) 0 sa, (-1 * ss) ss sa, 0 ss sa, 0 (2 * ss) sa, ss 0 sa, ss ss sa, (2* ss) 0 sa
78
 
79
td
80
  padding 0 10px
81
  border-right 1px solid bc
82
  border-bottom 1px solid bc
83
  line-height 25px
84
  &:last-child
85
    border-right none
86
 
87
tr
88
  &:nth-child(odd)
89
    background od
90
  &:nth-child(even)
91
    background ev
92
 
93
body
94
html
95
  width 100%
96
  height 100%
97
  margin 0
98
  padding 0
99
  
100
body
101
  font-weight 300
102
  font-family "Helvetica Neue", Helvetica, Arial, sans-serif
103
  background-image url('http://allpicts.in/download/7919/Maroon_and_Purple_Gradient_CSS_Background_Image.jpg/')
104
  background-size cover
105
  color fc
106
 
107
.container
108
  position relative
109
  width 600px
110
  margin calc(50vh - 150px) auto 0 auto
111
 
 
JavaScript 
$("table").dataTable({
1
$("table").dataTable({
2
  processing: true,
3
  serverSide: true,
4
  ajax: {
5
    url: "http://www.datatables.net/examples/server_side/scripts/jsonp.php",
6
    dataType: "jsonp",
7
  },
8
});
9
 
 

Animated sort buttons

CSSDeck G+