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.

257 lines
6.6 KiB

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