Ajax Loader
HTML 
<div class="crumbs-container">
1
<div class="crumbs-container">
2
  <div class="shine"></div>
3
  <ul class="crumbs" data-count="6">
4
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
5
    <li><a href="#"><span>Breadcrumb 2</span></a></li>
6
    <li><a href="#"><span>Breadcrumb 3</span></a></li>
7
    <li><a href="#"><span>Breadcrumb 4</span></a></li>
8
    <li><a href="#"><span>Breadcrumb 5</span></a></li>
9
    <li><a href="#"><span>Breadcrumb 6</span></a></li>
10
  </ul>
11
</div>
12
 
13
<div class="crumbs-container">
14
  <div class="shine"></div>
15
  <ul class="crumbs" data-count="5">
16
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
17
    <li><a href="#"><span>Breadcrumb 2</span></a></li>
18
    <li><a href="#"><span>Breadcrumb 3</span></a></li>
19
    <li><a href="#"><span>Breadcrumb 4</span></a></li>
20
    <li><a href="#"><span>Breadcrumb 5</span></a></li>
21
  </ul>
22
</div>
23
 
24
<div class="crumbs-container">
25
  <div class="shine"></div>
26
  <ul class="crumbs" data-count="4">
27
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
28
    <li><a href="#"><span>Breadcrumb 2</span></a></li>
29
    <li><a href="#"><span>Breadcrumb 3</span></a></li>
30
    <li><a href="#"><span>Breadcrumb 4</span></a></li>
31
  </ul>
32
</div>
33
 
34
<div class="crumbs-container">
35
  <div class="shine"></div>
36
  <ul class="crumbs" data-count="3">
37
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
38
    <li><a href="#"><span>Breadcrumb 2</span></a></li>
39
    <li><a href="#"><span>Breadcrumb 3</span></a></li>
40
  </ul>
41
</div>
42
 
43
<div class="crumbs-container">
44
  <div class="shine"></div>
45
  <ul class="crumbs" data-count="2">
46
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
47
    <li><a href="#"><span>Breadcrumb 2</span></a></li>
48
  </ul>
49
</div>
50
 
51
<div class="crumbs-container">
52
  <div class="shine"></div>
53
  <ul class="crumbs" data-count="1">
54
    <li><a href="#"><span>Breadcrumb 1</span></a></li>
55
  </ul>
56
</div>
 
CSS 
$body-background: #030b0f;
1
$body-background: #030b0f;
2
$crumb-link: #fff;
3
$crumb-1: #43484c;
4
$crumb-2: #393f43;
5
$crumb-3: #2e3539;
6
$crumb-4: #23292d;
7
$crumb-5: #171f23;
8
$crumb-6: #0c1317;
9
 
10
body {
11
  background: $body-background;
12
  padding: 30px;
13
}
14
 
15
div.crumbs-container {
16
  @include clearfix;
17
  position: relative;
18
  margin-bottom: 20px;
19
  height: 42px;
20
  width: 940px;
21
  clear: both;
22
 
23
  div.shine {
24
    background: url(http://i.imgur.com/nktGs.png) no-repeat top left;
25
    position: absolute;
26
    left: 0;
27
    top: 0;
28
    width: 940px;
29
    height: 42px;
30
    z-index: 5;
31
    pointer-events: none;
32
  }
33
34
  ul.crumbs {
35
    z-index: 2;
36
  }
37
}
38
 
39
ul.crumbs {
40
  @include clearfix;
41
  list-style: none;
42
  margin: 0 0 20px;
43
  padding: 0;
44
  overflow: hidden;
45
  position: absolute;
46
  left: 0;
47
  top: 0;
48
  width: 940px;
49
  height: 42px;
50
 
51
  &[data-count="6"] {
52
    li:nth-child(1) a { background: $crumb-1; &:after { border-left-color: $crumb-1; } }
53
    li:nth-child(2) a { background: $crumb-2; &:after { border-left-color: $crumb-2; } }
54
    li:nth-child(3) a { background: $crumb-3; &:after { border-left-color: $crumb-3; } }
55
    li:nth-child(4) a { background: $crumb-4; &:after { border-left-color: $crumb-4; } }
56
    li:nth-child(5) a { background: $crumb-5; &:after { border-left-color: $crumb-5; } }
57
    li:nth-child(6) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
58
  }
59
60
  &[data-count="5"] {
61
    li:nth-child(1) a { background: $crumb-2; &:after { border-left-color: $crumb-2; } }
62
    li:nth-child(2) a { background: $crumb-3; &:after { border-left-color: $crumb-3; } }
63
    li:nth-child(3) a { background: $crumb-4; &:after { border-left-color: $crumb-4; } }
64
    li:nth-child(4) a { background: $crumb-5; &:after { border-left-color: $crumb-5; } }
65
    li:nth-child(5) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
66
  }
67
68
  &[data-count="4"] {
69
    li:nth-child(1) a { background: $crumb-3; &:after { border-left-color: $crumb-3; } }
70
    li:nth-child(2) a { background: $crumb-4; &:after { border-left-color: $crumb-4; } }
71
    li:nth-child(3) a { background: $crumb-5; &:after { border-left-color: $crumb-5; } }
72
    li:nth-child(4) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
73
  }
74
75
  &[data-count="3"] {
76
    li:nth-child(1) a { background: $crumb-4; &:after { border-left-color: $crumb-4; } }
77
    li:nth-child(2) a { background: $crumb-5; &:after { border-left-color: $crumb-5; } }
78
    li:nth-child(3) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
79
  }
80
81
  &[data-count="2"] {
82
    li:nth-child(1) a { background: $crumb-5; &:after { border-left-color: $crumb-5; } }
83
    li:nth-child(2) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
84
  }
85
86
  &[data-count="1"] {
87
    li:nth-child(1) a { background: $crumb-6; &:after { border-left-color: $crumb-6; } }
88
  }
89
 
90
  li {
91
    display: block;
92
    float: left;
93
 
94
    &:first-child a { padding-left: 10px; border-radius: 5px 0 0 5px; }
95
96
    a {
97
      background: $crumb-1;
98
      display: block;
99
      padding: 0 20px 0 50px;
100
      height: 42px;
101
      line-height: 42px;
102
      text-decoration: none;
103
      position: relative;
104
      color: $crumb-link;
105
106
      &:hover {
107
        text-decoration: underline;
108
      }
109
110
      &:after {
111
        content: " ";
112
        display: block;
113
        width: 0;
114
        height: 0;
115
        border-top: 100px solid transparent;
116
        border-bottom: 100px solid transparent;
117
        border-left: 40px solid $crumb-1;
118
        position: absolute;
119
        top: 50%;
120
        margin-top: -100px;
121
        left: 100%;
122
        z-index: 2;
123
      }
124
125
      span {
126
        text-transform: uppercase;
127
        font-size: 0.7em;
128
        font-weight: bold;
129
        z-index: 3;
130
      }
131
    }
132
  }
133
}
 

Semi-dynamic Breadcrumb

CSSDeck G+