bootstrap-progressbar-3.3.0.css 6.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. /*! bootstrap-progressbar v0.8.4 | Copyright (c) 2012-2014 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{border-radius:0; margin-bottom: 18px; }
  19. .progress.right .progress-bar{
  20. float:right; right:0;
  21. }
  22. .progress.vertical {
  23. width: 40px;
  24. }
  25. .progress.progress_sm{border-radius:0; margin-bottom: 18px; height: 10px !important; }
  26. .progress.progress_sm .progress-bar{height: 10px !important; }
  27. .dashboard_graph p {margin: 0 0 4px; }
  28. ul.verticle_bars{
  29. width: 100%;
  30. }
  31. ul.verticle_bars li{
  32. width: 23%; height:200px; margin: 0;
  33. }
  34. .progress {
  35. overflow: hidden;
  36. height: 20px;
  37. margin-bottom: 20px;
  38. background-color: #f5f5f5;
  39. -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  40. box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  41. }
  42. .progress-bar {
  43. float: left;
  44. width: 0%;
  45. height: 100%;
  46. font-size: 12px;
  47. line-height: 20px;
  48. color: #ffffff;
  49. text-align: center;
  50. background-color: #428bca;
  51. -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  52. box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  53. -webkit-transition: width 0.6s ease;
  54. -o-transition: width 0.6s ease;
  55. transition: width 0.6s ease;
  56. }
  57. .progress-striped .progress-bar,
  58. .progress-bar-striped {
  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. background-size: 40px 40px;
  63. }
  64. .progress.active .progress-bar,
  65. .progress-bar.active {
  66. -webkit-animation: progress-bar-stripes 2s linear infinite;
  67. -o-animation: progress-bar-stripes 2s linear infinite;
  68. animation: progress-bar-stripes 2s linear infinite;
  69. }
  70. .progress-bar-success {
  71. background-color: #26B99A;
  72. }
  73. .progress-striped .progress-bar-success {
  74. 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);
  75. 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);
  76. 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);
  77. }
  78. .progress-bar-info {
  79. background-color: #3498DB;
  80. }
  81. .progress-striped .progress-bar-info {
  82. 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);
  83. 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);
  84. 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);
  85. }
  86. .progress-bar-warning {
  87. background-color: #F39C12;
  88. }
  89. .progress-striped .progress-bar-warning {
  90. 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);
  91. 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);
  92. 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);
  93. }
  94. .progress-bar-danger {
  95. background-color: #d9534f;
  96. }
  97. .progress-striped .progress-bar-danger {
  98. 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);
  99. 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);
  100. 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);
  101. }
  102. .progress {
  103. position: relative;
  104. }
  105. .progress .progress-bar {
  106. position: absolute;
  107. overflow: hidden;
  108. line-height: 20px;
  109. }
  110. .progress .progressbar-back-text {
  111. position: absolute;
  112. width: 100%;
  113. height: 100%;
  114. font-size: 12px;
  115. line-height: 20px;
  116. text-align: center;
  117. }
  118. .progress .progressbar-front-text {
  119. display: block;
  120. width: 100%;
  121. font-size: 12px;
  122. line-height: 20px;
  123. text-align: center;
  124. }
  125. .progress.right .progress-bar {
  126. right: 0;
  127. }
  128. .progress.right .progressbar-front-text {
  129. position: absolute;
  130. right: 0;
  131. }
  132. .progress.vertical {
  133. width: 20px;
  134. height: 100%;
  135. float: left;
  136. margin-right: 10px;
  137. }
  138. .progress.vertical.progress_wide{
  139. width: 35px;
  140. }
  141. .progress.vertical.bottom {
  142. position: relative;
  143. }
  144. .progress.vertical.bottom .progressbar-front-text {
  145. position: absolute;
  146. bottom: 0;
  147. }
  148. .progress.vertical .progress-bar {
  149. width: 100%;
  150. height: 0;
  151. -webkit-transition: height 0.6s ease;
  152. -o-transition: height 0.6s ease;
  153. transition: height 0.6s ease;
  154. }
  155. .progress.vertical.bottom .progress-bar {
  156. position: absolute;
  157. bottom: 0;
  158. }