You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

255 lines
5.0 KiB

  1. /*
  2. * # Semantic - Progress Bar
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Progress Bar
  13. *******************************/
  14. .ui.progress {
  15. border: 1px solid rgba(0, 0, 0, 0.1);
  16. width: 100%;
  17. height: 35px;
  18. background-color: #FAFAFA;
  19. padding: 5px;
  20. border-radius: 0.3125em;
  21. -webkit-box-sizing: border-box;
  22. -moz-box-sizing: border-box;
  23. -ms-box-sizing: border-box;
  24. box-sizing: border-box;
  25. }
  26. .ui.progress .bar {
  27. display: inline-block;
  28. height: 100%;
  29. background-color: #CCCCCC;
  30. border-radius: 3px;
  31. -webkit-transition: width 1s ease-in-out, background-color 1s ease-out;
  32. transition: width 1s ease-in-out, background-color 1s ease-out;
  33. }
  34. /*******************************
  35. States
  36. *******************************/
  37. /*--------------
  38. Successful
  39. ---------------*/
  40. .ui.successful.progress .bar {
  41. background-color: #73E064 !important;
  42. }
  43. .ui.successful.progress .bar,
  44. .ui.successful.progress .bar::after {
  45. -webkit-animation: none !important;
  46. animation: none !important;
  47. }
  48. /*--------------
  49. Failed
  50. ---------------*/
  51. .ui.failed.progress .bar {
  52. background-color: #DF9BA4 !important;
  53. }
  54. .ui.failed.progress .bar,
  55. .ui.failed.progress .bar::after {
  56. -webkit-animation: none !important;
  57. animation: none !important;
  58. }
  59. /*--------------
  60. Active
  61. ---------------*/
  62. .ui.active.progress .bar {
  63. position: relative;
  64. }
  65. .ui.active.progress .bar::after {
  66. content: '';
  67. opacity: 0;
  68. position: absolute;
  69. top: 0px;
  70. left: 0px;
  71. right: 0px;
  72. bottom: 0px;
  73. background: #FFFFFF;
  74. border-radius: 3px;
  75. -webkit-animation: progress-active 2s ease-out infinite;
  76. animation: progress-active 2s ease-out infinite;
  77. }
  78. @-webkit-keyframes progress-active {
  79. 0% {
  80. opacity: 0;
  81. width: 0;
  82. }
  83. 50% {
  84. opacity: 0.3;
  85. }
  86. 100% {
  87. opacity: 0;
  88. width: 95%;
  89. }
  90. }
  91. @keyframes progress-active {
  92. 0% {
  93. opacity: 0;
  94. width: 0;
  95. }
  96. 50% {
  97. opacity: 0.3;
  98. }
  99. 100% {
  100. opacity: 0;
  101. width: 100%;
  102. }
  103. }
  104. /*--------------
  105. Disabled
  106. ---------------*/
  107. .ui.disabled.progress {
  108. opacity: 0.35;
  109. }
  110. .ui.disabled.progress .bar,
  111. .ui.disabled.progress .bar::after {
  112. -webkit-animation: none !important;
  113. animation: none !important;
  114. }
  115. /*******************************
  116. Variations
  117. *******************************/
  118. /*--------------
  119. Attached
  120. ---------------*/
  121. /* bottom attached */
  122. .ui.progress.attached {
  123. position: relative;
  124. border: none;
  125. }
  126. .ui.progress.attached,
  127. .ui.progress.attached .bar {
  128. display: block;
  129. height: 3px;
  130. padding: 0px;
  131. overflow: hidden;
  132. border-radius: 0em 0em 0.3125em 0.3125em;
  133. }
  134. .ui.progress.attached .bar {
  135. border-radius: 0em;
  136. }
  137. /* top attached */
  138. .ui.progress.top.attached,
  139. .ui.progress.top.attached .bar {
  140. top: -2px;
  141. border-radius: 0.3125em 0.3125em 0em 0em;
  142. }
  143. .ui.progress.top.attached .bar {
  144. border-radius: 0em;
  145. }
  146. /*--------------
  147. Colors
  148. ---------------*/
  149. .ui.blue.progress .bar {
  150. background-color: #6ECFF5;
  151. }
  152. .ui.black.progress .bar {
  153. background-color: #5C6166;
  154. }
  155. .ui.green.progress .bar {
  156. background-color: #A1CF64;
  157. }
  158. .ui.red.progress .bar {
  159. background-color: #EF4D6D;
  160. }
  161. .ui.purple.progress .bar {
  162. background-color: #564F8A;
  163. }
  164. .ui.teal.progress .bar {
  165. background-color: #00B5AD;
  166. }
  167. /*--------------
  168. Striped
  169. ---------------*/
  170. .ui.progress.striped .bar {
  171. -webkit-background-size: 30px 30px;
  172. background-size: 30px 30px;
  173. background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  174. background-image: -webkit-linear-gradient(135deg, 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);
  175. background-image: -webkit-linear-gradient(315deg, 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: linear-gradient(135deg, 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. }
  178. .ui.progress.active.striped .bar:after {
  179. -webkit-animation: none;
  180. -ms-animation: none;
  181. animation: none;
  182. }
  183. .ui.progress.active.striped .bar {
  184. -webkit-animation: progress-striped 3s linear infinite;
  185. animation: progress-striped 3s linear infinite;
  186. }
  187. @-webkit-keyframes progress-striped {
  188. 0% {
  189. background-position: 0px 0;
  190. }
  191. 100% {
  192. background-position: 60px 0;
  193. }
  194. }
  195. @keyframes progress-striped {
  196. 0% {
  197. background-position: 0px 0;
  198. }
  199. 100% {
  200. background-position: 60px 0;
  201. }
  202. }
  203. /*--------------
  204. Sizes
  205. ---------------*/
  206. .ui.small.progress .bar {
  207. height: 14px;
  208. }