bootstrap-progressbar-3.2.0.css 9.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194
  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: #428bca;
  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[aria-valuenow="1"],
  56. .progress-bar[aria-valuenow="2"] {
  57. min-width: 30px;
  58. }
  59. .progress-bar[aria-valuenow="0"] {
  60. color: #777777;
  61. min-width: 30px;
  62. background-color: transparent;
  63. background-image: none;
  64. box-shadow: none;
  65. }
  66. .progress-bar-success {
  67. background-color: #5cb85c;
  68. }
  69. .progress-striped .progress-bar-success {
  70. 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);
  71. 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);
  72. 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);
  73. }
  74. .progress-bar-info {
  75. background-color: #5bc0de;
  76. }
  77. .progress-striped .progress-bar-info {
  78. 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);
  79. 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);
  80. 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);
  81. }
  82. .progress-bar-warning {
  83. background-color: #f0ad4e;
  84. }
  85. .progress-striped .progress-bar-warning {
  86. 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);
  87. 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);
  88. 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);
  89. }
  90. .progress-bar-danger {
  91. background-color: #d9534f;
  92. }
  93. .progress-striped .progress-bar-danger {
  94. 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);
  95. 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);
  96. 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);
  97. }
  98. .progress {
  99. position: relative;
  100. }
  101. .progress .progress-bar {
  102. position: absolute;
  103. overflow: hidden;
  104. line-height: 20px;
  105. }
  106. .progress .progressbar-back-text {
  107. position: absolute;
  108. width: 100%;
  109. height: 100%;
  110. font-size: 12px;
  111. line-height: 20px;
  112. text-align: center;
  113. }
  114. .progress .progressbar-front-text {
  115. display: block;
  116. width: 100%;
  117. font-size: 12px;
  118. line-height: 20px;
  119. text-align: center;
  120. }
  121. .progress.right .progress-bar {
  122. right: 0;
  123. }
  124. .progress.right .progressbar-front-text {
  125. position: absolute;
  126. right: 0;
  127. }
  128. .progress.vertical {
  129. width: 20px;
  130. height: 100%;
  131. float: left;
  132. margin-right: 20px;
  133. }
  134. .progress.vertical.bottom {
  135. position: relative;
  136. }
  137. .progress.vertical.bottom .progressbar-front-text {
  138. position: absolute;
  139. bottom: 0;
  140. }
  141. .progress.vertical .progress-bar {
  142. width: 100%;
  143. height: 0;
  144. -webkit-transition: height 0.6s ease;
  145. -o-transition: height 0.6s ease;
  146. transition: height 0.6s ease;
  147. }
  148. .progress.vertical.bottom .progress-bar {
  149. position: absolute;
  150. bottom: 0;
  151. }
  152. .progress-bar[aria-valuenow="1"],
  153. .progress-bar[aria-valuenow="2"] {
  154. min-width: 0;
  155. }
  156. .progress-bar[aria-valuenow="0"] {
  157. color: #ffffff;
  158. min-width: 0;
  159. background-color: #428bca;
  160. -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  161. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  162. }
  163. .progress-bar[aria-valuenow="0"].progress-bar-success {
  164. background-color: #5cb85c;
  165. }
  166. .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-success {
  167. 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);
  168. 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);
  169. 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);
  170. }
  171. .progress-bar[aria-valuenow="0"].progress-bar-info {
  172. background-color: #5bc0de;
  173. }
  174. .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-info {
  175. 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);
  176. 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);
  177. 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);
  178. }
  179. .progress-bar[aria-valuenow="0"].progress-bar-warning {
  180. background-color: #f0ad4e;
  181. }
  182. .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-warning {
  183. 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);
  184. 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);
  185. 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);
  186. }
  187. .progress-bar[aria-valuenow="0"].progress-bar-danger {
  188. background-color: #d9534f;
  189. }
  190. .progress-striped .progress-bar[aria-valuenow="0"].progress-bar-danger {
  191. 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);
  192. 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);
  193. 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);
  194. }