Skip to content

Instantly share code, notes, and snippets.

@scottb
Last active August 29, 2015 14:16
Show Gist options
  • Save scottb/d8ca4183c32467632f91 to your computer and use it in GitHub Desktop.
Save scottb/d8ca4183c32467632f91 to your computer and use it in GitHub Desktop.
Bootstrap3-styled progress tags (makes HTML5 progress tags look like Bootstrap3's div.progress
$progress-border-radius: $border-radius-base !default;
progress {
color: $progress-bar-bg;
background-size: auto;
width: 100%;
height: 20px;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
border-radius: $progress-border-radius;
margin-bottom: 20px;
&::-moz-progress-bar {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
&::-webkit-progress-value {
border-top-left-radius: $progress-border-radius;
border-bottom-left-radius: $progress-border-radius;
}
&::-webkit-progress-bar {
background: $progress-bg;
border-radius: $progress-border-radius;
box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.15);
}
&:not([value]) {
&::-moz-progress-bar {
background-image: url(indeterminate.gif);
}
&::-webkit-progress-bar {
background-image: url(indeterminate.gif);
}
}
&.progress-bar-striped {
&::-moz-progress-bar {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
&::-webkit-progress-value {
background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
}
}
&.active {
&::-moz-progress-bar {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
&::-webkit-progress-value {
-webkit-animation: progress-bar-stripes 2s linear infinite;
animation: progress-bar-stripes 2s linear infinite;
}
}
&::-moz-progress-bar { background-color: $progress-bar-bg; }
&::-webkit-progress-value { background-color: $progress-bar-bg; }
&.progress-bar-success {
&::-moz-progress-bar { background-color: $progress-bar-success-bg; }
&::-webkit-progress-value { background-color: $progress-bar-success-bg; }
}
&.progress-bar-info {
&::-moz-progress-bar { background-color: $progress-bar-info-bg; }
&::-webkit-progress-value { background-color: $progress-bar-info-bg; }
}
&.progress-bar-warning {
&::-moz-progress-bar { background-color: $progress-bar-warning-bg; }
&::-webkit-progress-value { background-color: $progress-bar-warning-bg; }
}
&.progress-bar-danger {
&::-moz-progress-bar { background-color: $progress-bar-danger-bg; }
&::-webkit-progress-value { background-color: $progress-bar-danger-bg; }
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment