Create a gist now

Instantly share code, notes, and snippets.

@dongliu /example
Last active Aug 29, 2015

What would you like to do?
bootstrap progress bar with markers and labels
mixin progress(id)
.bar-wrap
.progress.no-extra-space(id=id)
.progress-marker(style='right:25%')
.progress-marker(style='right:50%')
.progress-marker(style='right:75%')
mixin time-axis
.time-axis
.time-spot-end now
.time-spot.text-center 6 hours ago
.time-spot.text-center 12 hours ago
.time-spot.text-center 18 hours ago
.time-spot-end.text-right 24 hours ago
.row
+progress('my_status')
.row
+time-axis
.bar-wrap {
position: relative;
}
.progress-marker {
width: 2px;
height: 10px;
position: absolute;
background: black;
bottom: -5px;
}
.time-axis {
display: block;
float: left;
width: 100%;
/*margin: 0px 0 10px 0;*/
}
.time-spot {
display: block;
float: left;
width: 25%;
}
.time-spot-end {
display: block;
float: left;
width: 12.5%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment