Ajax Loader
HTML
<div class="tape"></div>
1
<div class="tape"></div>
 
CSS
html {
1
html {
2
  background-color: salmon;
3
  background-image: linear-gradient(hsla(0,0%,0%,.3), hsla(0,0%,100%,.1)),
4
                    linear-gradient(left, hsla(0,0%,0%,.025) 50%, transparent 50%);
5
  background-size: 100% 100%,
6
                   1.5em 1.5em;
7
  box-sizing: border-box;
8
  min-height: 100%;
9
  padding: 6em 3em;
10
}
11
.tape {
12
  background-color: hsla(0,0%,100%,.2);
13
  box-shadow: inset 0 0 1em .5em hsla(0,0%,100%,.1);
14
  height: 3em;
15
  position: absolute;
16
  transform: rotate(-30deg);
17
  width: 9em;
18
  -webkit-filter: drop-shadow(0 1px 1px hsla(0,0%,0%,.3));
19
}
20
.tape:after,
21
.tape:before {
22
  background-size: .4em .4em;
23
  bottom: 0;
24
  content: '';
25
  position: absolute;
26
  top: 0;
27
  width: .2em;
28
}
29
.tape:after {
30
  background-image: linear-gradient(45deg, transparent 50%, hsla(0,0%,100%,.3) 50%),
31
                    linear-gradient(-45deg, transparent 50%, hsla(0,0%,100%,.3) 50%);
32
  background-position: 0 100%;
33
  left: -.2em;
34
}
35
.tape:before {
36
  background-image: linear-gradient(135deg, transparent 50%, hsla(0,0%,100%,.3) 50%),
37
                    linear-gradient(-135deg, transparent 50%, hsla(0,0%,100%,.3) 50%);
38
  background-position: 100% 100%;
39
  right: -.2em;
40
}
 

Pure CSS tape

CSSDeck G+