| |
1 <!DOCTYPE html> |
| |
2 <html> |
| |
3 <link rel='stylesheet' type='text/css' href='style.css'> |
| |
4 <style> |
| |
5 .progress-element { margin: 10px; } |
| |
6 body > div:nth-child(1) > .progress-bar { position: relative; top: 4px; left: 4px; |
| |
7 height: -moz-calc(100% - 8px); } |
| |
8 body > div:nth-child(2) > .progress-bar { } |
| |
9 body > div:nth-child(3) > .progress-bar { position: relative; top: 4px; left: 4px; |
| |
10 height: -moz-calc(100% - 8px); } |
| |
11 body > div:nth-child(4) > .progress-bar { position: relative; top: 10px; height: -moz-calc(100% - 10px); } |
| |
12 body > div:nth-child(5) > .progress-bar { } |
| |
13 body > div:nth-child(6) > .progress-bar { height: -moz-calc(100% - 10px); } |
| |
14 body > div:nth-child(7) > .progress-bar { position: relative; left: 10px; } |
| |
15 body > div:nth-child(8) > .progress-bar { } |
| |
16 body > div:nth-child(9) > .progress-bar { } |
| |
17 body > div:nth-child(10) > .progress-bar { } |
| |
18 body > div:nth-child(11) > .progress-bar { } |
| |
19 /* 12 - 15 should have 100% width, no need to specify. */ |
| |
20 body > div:nth-of-type(16) > .progress-bar { position: relative; top: 64px; left: 64px; |
| |
21 height: -moz-calc(100% - 32px); |
| |
22 width: -moz-calc(100% + 128px - 1em); } |
| |
23 </style> |
| |
24 <body> |
| |
25 <div class="progress-element vertical"> |
| |
26 <div class="progress-bar"> |
| |
27 </div> |
| |
28 </div> |
| |
29 <div class="progress-element vertical"> |
| |
30 <div class="progress-bar"> |
| |
31 </div> |
| |
32 </div> |
| |
33 <div class="progress-element vertical"> |
| |
34 <div class="progress-bar"> |
| |
35 </div> |
| |
36 </div> |
| |
37 <div class="progress-element vertical"> |
| |
38 <div class="progress-bar"> |
| |
39 </div> |
| |
40 </div> |
| |
41 <div class="progress-element vertical"> |
| |
42 <div class="progress-bar"> |
| |
43 </div> |
| |
44 </div> |
| |
45 <div class="progress-element vertical"> |
| |
46 <div class="progress-bar"> |
| |
47 </div> |
| |
48 </div> |
| |
49 <div class="progress-element vertical"> |
| |
50 <div class="progress-bar"> |
| |
51 </div> |
| |
52 </div> |
| |
53 <div class="progress-element vertical"> |
| |
54 <div class="progress-bar"> |
| |
55 </div> |
| |
56 </div> |
| |
57 <div class="progress-element vertical"> |
| |
58 <div class="progress-bar"> |
| |
59 </div> |
| |
60 </div> |
| |
61 <div class="progress-element vertical"> |
| |
62 <div class="progress-bar"> |
| |
63 </div> |
| |
64 </div> |
| |
65 <div class="progress-element vertical"> |
| |
66 <div class="progress-bar"> |
| |
67 </div> |
| |
68 </div> |
| |
69 <div class="progress-element vertical"> |
| |
70 <div class="progress-bar"> |
| |
71 </div> |
| |
72 </div> |
| |
73 <div class="progress-element vertical"> |
| |
74 <div class="progress-bar"> |
| |
75 </div> |
| |
76 </div> |
| |
77 <div class="progress-element vertical"> |
| |
78 <div class="progress-bar"> |
| |
79 </div> |
| |
80 </div> |
| |
81 <div class="progress-element vertical"> |
| |
82 <div class="progress-bar"> |
| |
83 </div> |
| |
84 </div> |
| |
85 <br><div class="progress-element vertical"> |
| |
86 <div class="progress-bar"> |
| |
87 </div> |
| |
88 </div> |
| |
89 </body> |
| |
90 </html> |