Ajax Loader
HTML 
<h2>CSS3 Timeline</h2>
1
<h2>CSS3 Timeline</h2>
2
<p>Please set the $vertical variable to false to see the horizontal version.</p>
3
<ul id='timeline'>
4
  <li class='work'>
5
    <input class='radio' id='work5' name='works' type='radio' checked>
6
    <div class="relative">
7
      <label for='work5'>Lorem ipsum dolor sit amet</label>
8
      <span class='date'>12 May 2013</span>
9
      <span class='circle'></span>
10
    </div>
11
    <div class='content'>
12
      <p>
13
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
14
      </p>
15
    </div>
16
  </li>
17
  <li class='work'>
18
    <input class='radio' id='work4' name='works' type='radio'>
19
    <div class="relative">
20
      <label for='work4'>Lorem ipsum dolor sit amet</label>
21
      <span class='date'>11 May 2013</span>
22
      <span class='circle'></span>
23
    </div>
24
    <div class='content'>
25
      <p>
26
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
27
      </p>
28
    </div>
29
  </li>
30
  <li class='work'>
31
    <input class='radio' id='work3' name='works' type='radio'>
32
    <div class="relative">
33
      <label for='work3'>Lorem ipsum dolor sit amet</label>
34
      <span class='date'>10 May 2013</span>
35
      <span class='circle'></span>
36
    </div>
37
    <div class='content'>
38
      <p>
39
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
40
      </p>
41
    </div>
42
  </li>
43
  <li class='work'>
44
    <input class='radio' id='work2' name='works' type='radio'>
45
    <div class="relative">
46
      <label for='work2'>Lorem ipsum dolor sit amet</label>
47
      <span class='date'>09 May 2013</span>
48
      <span class='circle'></span>
49
    </div>
50
    <div class='content'>
51
      <p>
52
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
53
      </p>
54
    </div>
55
  </li>
56
  <li class='work'>
57
    <input class='radio' id='work1' name='works' type='radio'>
58
    <div class="relative">
59
      <label for='work1'>Lorem ipsum dolor sit amet</label>
60
      <span class='date'>08 May 2013</span>
61
      <span class='circle'></span>
62
    </div>
63
    <div class='content'>
64
      <p>
65
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio ea necessitatibus quo velit natus cupiditate qui alias possimus ab praesentium nostrum quidem obcaecati nesciunt! Molestiae officiis voluptate excepturi rem veritatis eum aliquam qui laborum non ipsam ullam tempore reprehenderit illum eligendi cumque mollitia temporibus! Natus dicta qui est optio rerum.
66
      </p>
67
    </div>
68
  </li>
69
</ul>
 
CSS 
/* -------------------------------------
1
/* -------------------------------------
2
 * For horizontal version, set the
3
 * $vertical variable to false
4
 * ------------------------------------- */
5
$vertical: true
6
 
7
/* -------------------------------------
8
 * General Style
9
 * ------------------------------------- */
10
 
11
// Colours
12
$bg: #48b379
13
$white: #eee9dc
14
$red: #f98262
15
 
16
@import url(http://fonts.googleapis.com/css?family=Noto+Sans)
17
 
18
body
19
  @if $vertical
20
    max-width: 1200px
21
    margin: 0 auto
22
  @else
23
    margin: 0
24
  padding: 0 5%
25
  font-size: 100%
26
  font-family: 'Noto Sans', sans-serif
27
  color: $white
28
  background: $bg
29
 
30
h2
31
  margin: 3em 0 0 0
32
  font-size: 1.5em
33
  letter-spacing: 2px
34
  text-transform: uppercase
35
 
36
/* -------------------------------------
37
 * timeline
38
 * ------------------------------------- */
39
 
40
#timeline
41
  list-style: none
42
  @if $vertical
43
    margin: 50px 0 30px 120px
44
    padding-left: 30px
45
    border-left: 8px solid $white
46
  @else
47
    margin: 120px 0 0
48
    padding: 0
49
    border-top: 8px solid $white
50
    display: table
51
    border-spacing: 30px 0
52
  li
53
    @if $vertical
54
      margin: 40px 0
55
      position: relative
56
    @else
57
      display: table-cell
58
      // for Firefox
59
      .relative
60
        position: relative
61
  p
62
    margin: 0 0 15px
63
 
64
.date
65
  @if $vertical
66
    margin-top: -10px
67
    top: 50%
68
    left: -158px
69
  @else
70
    text-align: center
71
    top: -55px
72
    left: 0
73
    right: 0
74
  font-size: 0.95em
75
  line-height: 20px
76
  position: absolute
77
.circle
78
  @if $vertical
79
    margin-top: -10px
80
    top: 50%
81
    left: -44px
82
  @else
83
    margin: 0 auto
84
    top: -14px
85
    left: 0
86
    right: 0
87
  width: 10px
88
  height: 10px
89
  background: $bg
90
  border: 5px solid $white
91
  border-radius: 50%
92
  display: block
93
  position: absolute
94
 
95
.content
96
  @if $vertical
97
    max-height: 20px
98
    padding: 50px 20px 0
99
    border-color: transparent
100
  @else
101
    width: 200px
102
    max-height: 0
103
    margin-top: 40px
104
    vertical-align: top
105
    padding: 50px 15px 15px
106
    transition: width 0.4s linear, max-height 0.4s linear
107
  border-width: 2px
108
  border-style: solid
109
  border-radius: 0.5em
110
  position: relative
111
  &:before, &:after
112
    content: ""
113
    width: 0
114
    height: 0
115
    border: solid transparent
116
    position: absolute
117
    pointer-events: none
118
    @if $vertical
119
      right: 100%
120
    @else
121
      bottom: 100%
122
  &:before
123
    @if $vertical
124
      border-right-color: inherit
125
      border-width: 20px
126
      top: 50%
127
      margin-top: -20px
128
    @else
129
      border-bottom-color: inherit
130
      border-width: 15px
131
      left: 50%
132
      margin-left: -15px
133
  &:after
134
    @if $vertical
135
      border-right-color: $bg
136
      border-width: 17px
137
      top: 50%
138
      margin-top: -17px
139
    @else
140
      border-bottom-color: $bg
141
      border-width: 12px
142
      left: 50%
143
      margin-left: -12px
144
  p
145
    max-height: 0
146
    color: transparent
147
    text-align: justify
148
    word-break: break-word
149
    hyphens: auto
150
    overflow: hidden
151
 
152
label
153
  font-size: 1.3em
154
  position: absolute
155
  z-index: 100
156
  cursor: pointer
157
  @if $vertical
158
    top: 20px
159
    transition: transform 0.2s linear
160
  @else
161
    width: 200px
162
    white-space: nowrap
163
    text-overflow: ellipsis
164
    overflow: hidden
165
    display: block
166
    top: 60px
167
    left: 15px
168
 
169
.radio
170
  display: none
171
.radio:checked
172
  & + .relative
173
    label
174
      cursor: auto
175
      @if $vertical
176
        transform: translateX(42px)
177
      @else
178
        width: 400px
179
        transition: width 0.3s linear 0.2s
180
    .circle
181
      background: $red
182
  & ~ .content
183
    max-height: 180px
184
    border-color: $white
185
    @if $vertical
186
      margin-right: 20px
187
      transform: translateX(20px)
188
      transition: max-height 0.4s linear, border-color 0.5s linear, transform 0.2s linear
189
    @else
190
      width: 400px
191
    p
192
      max-height: 200px
193
      color: $white
194
      transition: color 0.3s linear 0.3s
195
 
196
/* -------------------------------------
197
 * mobile phones (vertical version only)
198
 * ------------------------------------- */
199
@if $vertical
200
  @media screen and (max-width: 767px)
201
    #timeline
202
      margin-left: 0
203
      padding-left: 0
204
      border-left: none
205
      li
206
        margin: 50px 0
207
    label
208
      width: 85%
209
      font-size: 1.1em
210
      white-space: nowrap
211
      text-overflow: ellipsis
212
      overflow: hidden
213
      display: block
214
      transform: translateX(18px)
215
    .content
216
      padding-top: 45px
217
      border-color: $white
218
      &:before, &:after
219
        border: solid transparent
220
        bottom: 100%
221
      &:before
222
        border-bottom-color: inherit
223
        border-width: 17px
224
        top: -16px
225
        left: 50px
226
        margin-left: -17px
227
      &:after
228
        border-bottom-color: $bg
229
        border-width: 20px
230
        top: -20px
231
        left: 50px
232
        margin-left: -20px
233
      p
234
        font-size: 0.9em
235
        line-height: 1.4
236
    .circle, .date
237
      display: none
 

Pure CSS Timeline

CSSDeck G+