_progress-bars.scss 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  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: $progress-border-radius;
  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. //
  42. // `.progress-striped .progress-bar` is deprecated as of v3.2.0 in favor of the
  43. // `.progress-bar-striped` class, which you just add to an existing
  44. // `.progress-bar`.
  45. .progress-striped .progress-bar,
  46. .progress-bar-striped {
  47. @include gradient-striped;
  48. background-size: 40px 40px;
  49. }
  50. // Call animation for the active one
  51. //
  52. // `.progress.active .progress-bar` is deprecated as of v3.2.0 in favor of the
  53. // `.progress-bar.active` approach.
  54. .progress.active .progress-bar,
  55. .progress-bar.active {
  56. @include animation(progress-bar-stripes 2s linear infinite);
  57. }
  58. // Variations
  59. // -------------------------
  60. .progress-bar-success {
  61. @include progress-bar-variant($progress-bar-success-bg);
  62. }
  63. .progress-bar-info {
  64. @include progress-bar-variant($progress-bar-info-bg);
  65. }
  66. .progress-bar-warning {
  67. @include progress-bar-variant($progress-bar-warning-bg);
  68. }
  69. .progress-bar-danger {
  70. @include progress-bar-variant($progress-bar-danger-bg);
  71. }