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.

351 lines
6.8 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. -webkit-border-radius: 0.3125em;
  21. -moz-border-radius: 0.3125em;
  22. border-radius: 0.3125em;
  23. -webkit-box-sizing: border-box;
  24. -moz-box-sizing: border-box;
  25. -ms-box-sizing: border-box;
  26. box-sizing: border-box;
  27. }
  28. .ui.progress .bar {
  29. display: inline-block;
  30. height: 100%;
  31. background-color: #CCCCCC;
  32. -moz-border-radius: 3px;
  33. -webkit-border-radius: 3px;
  34. border-radius: 3px;
  35. -webkit-transition:
  36. width 1s ease-in-out,
  37. background-color 1s ease-out
  38. ;
  39. -moz-transition:
  40. width 1s ease-in-out,
  41. background-color 1s ease-out
  42. ;
  43. -ms-transition:
  44. width 1s ease-in-out,
  45. background-color 1s ease-out
  46. ;
  47. -o-transition:
  48. width 1s ease-in-out,
  49. background-color 1s ease-out
  50. ;
  51. transition:
  52. width 1s ease-in-out,
  53. background-color 1s ease-out
  54. ;
  55. }
  56. /*******************************
  57. States
  58. *******************************/
  59. /*--------------
  60. Successful
  61. ---------------*/
  62. .ui.successful.progress .bar {
  63. background-color: #73E064 !important;
  64. }
  65. .ui.successful.progress .bar,
  66. .ui.successful.progress .bar::after {
  67. -webkit-animation: none !important;
  68. -moz-animation: none !important;
  69. animation: none !important;
  70. }
  71. /*--------------
  72. Failed
  73. ---------------*/
  74. .ui.failed.progress .bar {
  75. background-color: #DF9BA4 !important;
  76. }
  77. .ui.failed.progress .bar,
  78. .ui.failed.progress .bar::after {
  79. -webkit-animation: none !important;
  80. -moz-animation: none !important;
  81. animation: none !important;
  82. }
  83. /*--------------
  84. Active
  85. ---------------*/
  86. .ui.active.progress .bar {
  87. position: relative;
  88. }
  89. .ui.active.progress .bar::after {
  90. content: '';
  91. opacity: 0;
  92. position: absolute;
  93. top: 0px;
  94. left: 0px;
  95. right: 0px;
  96. bottom: 0px;
  97. background: #FFFFFF;
  98. -moz-border-radius: 3px;
  99. -webkit-border-radius: 3px;
  100. border-radius: 3px;
  101. -webkit-animation: progress-active 2s ease-out infinite;
  102. -moz-animation: progress-active 2s ease-out infinite;
  103. animation: progress-active 2s ease-out infinite;
  104. }
  105. @-webkit-keyframes progress-active {
  106. 0% {
  107. opacity: 0;
  108. width: 0;
  109. }
  110. 50% {
  111. opacity: 0.3;
  112. }
  113. 100% {
  114. opacity: 0;
  115. width: 95%;
  116. }
  117. }
  118. @-moz-keyframes progress-active {
  119. 0% {
  120. opacity: 0;
  121. width: 0;
  122. }
  123. 50% {
  124. opacity: 0.3;
  125. }
  126. 100% {
  127. opacity: 0;
  128. width: 100%;
  129. }
  130. }
  131. @keyframes progress-active {
  132. 0% {
  133. opacity: 0;
  134. width: 0;
  135. }
  136. 50% {
  137. opacity: 0.3;
  138. }
  139. 100% {
  140. opacity: 0;
  141. width: 100%;
  142. }
  143. }
  144. /*--------------
  145. Disabled
  146. ---------------*/
  147. .ui.disabled.progress {
  148. opacity: 0.35;
  149. }
  150. .ui.disabled.progress .bar,
  151. .ui.disabled.progress .bar::after {
  152. -webkit-animation: none !important;
  153. -moz-animation: none !important;
  154. animation: none !important;
  155. }
  156. /*******************************
  157. Variations
  158. *******************************/
  159. /*--------------
  160. Attached
  161. ---------------*/
  162. /* bottom attached */
  163. .ui.progress.attached {
  164. position: relative;
  165. border: none;
  166. }
  167. .ui.progress.attached,
  168. .ui.progress.attached .bar {
  169. display: block;
  170. height: 3px;
  171. padding: 0px;
  172. overflow: hidden;
  173. -webkit-border-radius: 0em 0em 0.3125em 0.3125em;
  174. -moz-border-radius: 0em 0em 0.3125em 0.3125em;
  175. border-radius: 0em 0em 0.3125em 0.3125em;
  176. }
  177. .ui.progress.attached .bar {
  178. -webkit-border-radius: 0em;
  179. -moz-border-radius: 0em;
  180. border-radius: 0em;
  181. }
  182. /* top attached */
  183. .ui.progress.top.attached,
  184. .ui.progress.top.attached .bar {
  185. top: -2px;
  186. -webkit-border-radius: 0.3125em 0.3125em 0em 0em;
  187. -moz-border-radius: 0.3125em 0.3125em 0em 0em;
  188. border-radius: 0.3125em 0.3125em 0em 0em;
  189. }
  190. .ui.progress.top.attached .bar {
  191. -webkit-border-radius: 0em;
  192. -moz-border-radius: 0em;
  193. border-radius: 0em;
  194. }
  195. /*--------------
  196. Colors
  197. ---------------*/
  198. .ui.blue.progress .bar {
  199. background-color: #6ECFF5;
  200. }
  201. .ui.black.progress .bar {
  202. background-color: #5C6166;
  203. }
  204. .ui.green.progress .bar {
  205. background-color: #A1CF64;
  206. }
  207. .ui.red.progress .bar {
  208. background-color: #EF4D6D;
  209. }
  210. .ui.purple.progress .bar {
  211. background-color: #564F8A;
  212. }
  213. .ui.teal.progress .bar {
  214. background-color: #00B5AD;
  215. }
  216. /*--------------
  217. Striped
  218. ---------------*/
  219. .ui.progress.striped .bar {
  220. -webkit-background-size: 30px 30px;
  221. -moz-background-size: 30px 30px;
  222. background-size: 30px 30px;
  223. background-image:
  224. -webkit-gradient(linear, left top, right bottom,
  225. color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
  226. color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
  227. color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
  228. to(transparent)
  229. )
  230. ;
  231. background-image:
  232. -webkit-linear-gradient(
  233. 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  234. transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  235. transparent 75%, transparent
  236. )
  237. ;
  238. background-image:
  239. -moz-linear-gradient(
  240. 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  241. transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  242. transparent 75%, transparent
  243. )
  244. ;
  245. background-image:
  246. -ms-linear-gradient(
  247. 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  248. transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  249. transparent 75%, transparent
  250. )
  251. ;
  252. background-image:
  253. -o-linear-gradient(
  254. 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  255. transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  256. transparent 75%, transparent
  257. )
  258. ;
  259. background-image:
  260. linear-gradient(
  261. 135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  262. transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  263. transparent 75%, transparent
  264. )
  265. ;
  266. }
  267. .ui.progress.active.striped .bar:after {
  268. -webkit-animation: none;
  269. -moz-animation: none;
  270. -ms-animation: none;
  271. -o-animation: none;
  272. animation: none;
  273. }
  274. .ui.progress.active.striped .bar {
  275. -webkit-animation: progress-striped 3s linear infinite;
  276. -moz-animation: progress-striped 3s linear infinite;
  277. animation: progress-striped 3s linear infinite;
  278. }
  279. @-webkit-keyframes progress-striped {
  280. 0% {
  281. background-position: 0px 0;
  282. }
  283. 100% {
  284. background-position: 60px 0;
  285. }
  286. }
  287. @-moz-keyframes progress-striped {
  288. 0% {
  289. background-position: 0px 0;
  290. }
  291. 100% {
  292. background-position: 60px 0;
  293. }
  294. }
  295. @keyframes progress-striped {
  296. 0% {
  297. background-position: 0px 0;
  298. }
  299. 100% {
  300. background-position: 60px 0;
  301. }
  302. }
  303. /*--------------
  304. Sizes
  305. ---------------*/
  306. .ui.small.progress .bar {
  307. height: 14px;
  308. }