_progress-bars.scss 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. //
  2. // Progress bars
  3. // --------------------------------------------------
  4. // Bar animations
  5. // -------------------------
  6. // WebKit
  7. @-webkit-keyframes progress-bar-stripes {
  8. from { background-position: 40px 0; }
  9. to { background-position: 0 0; }
  10. }
  11. // Spec and IE10+
  12. @keyframes progress-bar-stripes {
  13. from { background-position: 40px 0; }
  14. to { background-position: 0 0; }
  15. }
  16. // Bar itself
  17. // -------------------------
  18. // Outer container
  19. .progress {
  20. overflow: hidden;
  21. height: $line-height-computed;
  22. margin-bottom: $line-height-computed;
  23. background-color: $progress-bg;
  24. border-radius: $border-radius-base;
  25. @include box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  26. }
  27. // Bar of progress
  28. .progress-bar {
  29. float: left;
  30. width: 0%;
  31. height: 100%;
  32. font-size: $font-size-small;
  33. line-height: $line-height-computed;
  34. color: $progress-bar-color;
  35. text-align: center;
  36. background-color: $progress-bar-bg;
  37. @include box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  38. @include transition(width .6s ease);
  39. }
  40. // Striped bars
  41. .progress-striped .progress-bar {
  42. @include gradient-striped();
  43. background-size: 40px 40px;
  44. }
  45. // Call animation for the active one
  46. .progress.active .progress-bar {
  47. @include animation(progress-bar-stripes 2s linear infinite);
  48. }
  49. // Variations
  50. // -------------------------
  51. .progress-bar-success {
  52. @include progress-bar-variant($progress-bar-success-bg);
  53. }
  54. .progress-bar-info {
  55. @include progress-bar-variant($progress-bar-info-bg);
  56. }
  57. .progress-bar-warning {
  58. @include progress-bar-variant($progress-bar-warning-bg);
  59. }
  60. .progress-bar-danger {
  61. @include progress-bar-variant($progress-bar-danger-bg);
  62. }