progress-bars.less 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. // PROGRESS BARS
  2. // -------------
  3. // ANIMATIONS
  4. // ----------
  5. // Webkit
  6. @-webkit-keyframes progress-bar-stripes {
  7. from { background-position: 0 0; }
  8. to { background-position: 40px 0; }
  9. }
  10. // Firefox
  11. @-moz-keyframes progress-bar-stripes {
  12. from { background-position: 0 0; }
  13. to { background-position: 40px 0; }
  14. }
  15. // IE9
  16. @-ms-keyframes progress-bar-stripes {
  17. from { background-position: 0 0; }
  18. to { background-position: 40px 0; }
  19. }
  20. // Spec
  21. @keyframes progress-bar-stripes {
  22. from { background-position: 0 0; }
  23. to { background-position: 40px 0; }
  24. }
  25. // THE BARS
  26. // --------
  27. // Outer container
  28. .progress {
  29. overflow: hidden;
  30. height: 18px;
  31. margin-bottom: 18px;
  32. #gradient > .vertical(#f5f5f5, #f9f9f9);
  33. .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  34. .border-radius(4px);
  35. }
  36. // Bar of progress
  37. .progress .bar {
  38. width: 0%;
  39. height: 18px;
  40. color: @white;
  41. font-size: 12px;
  42. text-align: center;
  43. text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  44. #gradient > .vertical(#149bdf, #0480be);
  45. .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  46. .box-sizing(border-box);
  47. .transition(width .6s ease);
  48. }
  49. // Striped bars
  50. .progress-striped .bar {
  51. #gradient > .striped(#149bdf);
  52. .background-size(40px 40px);
  53. }
  54. // Call animation for the active one
  55. .progress.active .bar {
  56. -webkit-animation: progress-bar-stripes 2s linear infinite;
  57. -moz-animation: progress-bar-stripes 2s linear infinite;
  58. animation: progress-bar-stripes 2s linear infinite;
  59. }
  60. // COLORS
  61. // ------
  62. // Danger (red)
  63. .progress-danger .bar {
  64. #gradient > .vertical(#ee5f5b, #c43c35);
  65. }
  66. .progress-danger.progress-striped .bar {
  67. #gradient > .striped(#ee5f5b);
  68. }
  69. // Success (green)
  70. .progress-success .bar {
  71. #gradient > .vertical(#62c462, #57a957);
  72. }
  73. .progress-success.progress-striped .bar {
  74. #gradient > .striped(#62c462);
  75. }
  76. // Info (teal)
  77. .progress-info .bar {
  78. #gradient > .vertical(#5bc0de, #339bb9);
  79. }
  80. .progress-info.progress-striped .bar {
  81. #gradient > .striped(#5bc0de);
  82. }
  83. // Warning (orange)
  84. .progress-warning .bar {
  85. #gradient > .vertical(lighten(@orange, 15%), @orange);
  86. }
  87. .progress-warning.progress-striped .bar {
  88. #gradient > .striped(lighten(@orange, 15%));
  89. }