bootstrap-progressbar-3.3.1.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. /*! bootstrap-progressbar v0.9.0 | Copyright (c) 2012-2015 Stephan Groß | MIT license | http://www.minddust.com */
  2. @-webkit-keyframes progress-bar-stripes {
  3. from {
  4. background-position: 40px 0;
  5. }
  6. to {
  7. background-position: 0 0;
  8. }
  9. }
  10. @keyframes progress-bar-stripes {
  11. from {
  12. background-position: 40px 0;
  13. }
  14. to {
  15. background-position: 0 0;
  16. }
  17. }
  18. .progress {
  19. overflow: hidden;
  20. height: 20px;
  21. margin-bottom: 20px;
  22. background-color: #f5f5f5;
  23. border-radius: 4px;
  24. -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  25. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  26. }
  27. .progress-bar {
  28. float: left;
  29. width: 0%;
  30. height: 100%;
  31. font-size: 12px;
  32. line-height: 20px;
  33. color: #ffffff;
  34. text-align: center;
  35. background-color: #337ab7;
  36. -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  37. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  38. -webkit-transition: width 0.6s ease;
  39. -o-transition: width 0.6s ease;
  40. transition: width 0.6s ease;
  41. }
  42. .progress-striped .progress-bar,
  43. .progress-bar-striped {
  44. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  45. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  46. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  47. background-size: 40px 40px;
  48. }
  49. .progress.active .progress-bar,
  50. .progress-bar.active {
  51. -webkit-animation: progress-bar-stripes 2s linear infinite;
  52. -o-animation: progress-bar-stripes 2s linear infinite;
  53. animation: progress-bar-stripes 2s linear infinite;
  54. }
  55. .progress-bar-success {
  56. background-color: #5cb85c;
  57. }
  58. .progress-striped .progress-bar-success {
  59. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  60. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  61. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  62. }
  63. .progress-bar-info {
  64. background-color: #5bc0de;
  65. }
  66. .progress-striped .progress-bar-info {
  67. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  68. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  69. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  70. }
  71. .progress-bar-warning {
  72. background-color: #f0ad4e;
  73. }
  74. .progress-striped .progress-bar-warning {
  75. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  76. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  77. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  78. }
  79. .progress-bar-danger {
  80. background-color: #d9534f;
  81. }
  82. .progress-striped .progress-bar-danger {
  83. background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  84. background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  85. background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  86. }
  87. .progress {
  88. position: relative;
  89. }
  90. .progress .progress-bar {
  91. position: absolute;
  92. overflow: hidden;
  93. line-height: 20px;
  94. }
  95. .progress .progressbar-back-text {
  96. position: absolute;
  97. width: 100%;
  98. height: 100%;
  99. font-size: 12px;
  100. line-height: 20px;
  101. text-align: center;
  102. }
  103. .progress .progressbar-front-text {
  104. display: block;
  105. width: 100%;
  106. font-size: 12px;
  107. line-height: 20px;
  108. text-align: center;
  109. }
  110. .progress.right .progress-bar {
  111. right: 0;
  112. }
  113. .progress.right .progressbar-front-text {
  114. position: absolute;
  115. right: 0;
  116. }
  117. .progress.vertical {
  118. width: 20px;
  119. height: 100%;
  120. float: left;
  121. margin-right: 20px;
  122. }
  123. .progress.vertical.bottom {
  124. position: relative;
  125. }
  126. .progress.vertical.bottom .progressbar-front-text {
  127. position: absolute;
  128. bottom: 0;
  129. }
  130. .progress.vertical .progress-bar {
  131. width: 100%;
  132. height: 0;
  133. -webkit-transition: height 0.6s ease;
  134. -o-transition: height 0.6s ease;
  135. transition: height 0.6s ease;
  136. }
  137. .progress.vertical.bottom .progress-bar {
  138. position: absolute;
  139. bottom: 0;
  140. }