progress.css 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517
  1. /*!
  2. * # Semantic UI 2.4.2 - Progress Bar
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Progress
  12. *******************************/
  13. .ui.progress {
  14. position: relative;
  15. display: block;
  16. max-width: 100%;
  17. border: none;
  18. margin: 1em 0em 2.5em;
  19. -webkit-box-shadow: none;
  20. box-shadow: none;
  21. background: rgba(0, 0, 0, 0.1);
  22. padding: 0em;
  23. border-radius: 0.28571429rem;
  24. }
  25. .ui.progress:first-child {
  26. margin: 0em 0em 2.5em;
  27. }
  28. .ui.progress:last-child {
  29. margin: 0em 0em 1.5em;
  30. }
  31. /*******************************
  32. Content
  33. *******************************/
  34. /* Activity Bar */
  35. .ui.progress .bar {
  36. display: block;
  37. line-height: 1;
  38. position: relative;
  39. width: 0%;
  40. min-width: 2em;
  41. background: #888888;
  42. border-radius: 0.28571429rem;
  43. -webkit-transition: width 0.1s ease, background-color 0.1s ease;
  44. transition: width 0.1s ease, background-color 0.1s ease;
  45. }
  46. /* Percent Complete */
  47. .ui.progress .bar > .progress {
  48. white-space: nowrap;
  49. position: absolute;
  50. width: auto;
  51. font-size: 0.92857143em;
  52. top: 50%;
  53. right: 0.5em;
  54. left: auto;
  55. bottom: auto;
  56. color: rgba(255, 255, 255, 0.7);
  57. text-shadow: none;
  58. margin-top: -0.5em;
  59. font-weight: bold;
  60. text-align: left;
  61. }
  62. /* Label */
  63. .ui.progress > .label {
  64. position: absolute;
  65. width: 100%;
  66. font-size: 1em;
  67. top: 100%;
  68. right: auto;
  69. left: 0%;
  70. bottom: auto;
  71. color: rgba(0, 0, 0, 0.87);
  72. font-weight: bold;
  73. text-shadow: none;
  74. margin-top: 0.2em;
  75. text-align: center;
  76. -webkit-transition: color 0.4s ease;
  77. transition: color 0.4s ease;
  78. }
  79. /*******************************
  80. Types
  81. *******************************/
  82. /* Indicating */
  83. .ui.indicating.progress[data-percent^="1"] .bar,
  84. .ui.indicating.progress[data-percent^="2"] .bar {
  85. background-color: #D95C5C;
  86. }
  87. .ui.indicating.progress[data-percent^="3"] .bar {
  88. background-color: #EFBC72;
  89. }
  90. .ui.indicating.progress[data-percent^="4"] .bar,
  91. .ui.indicating.progress[data-percent^="5"] .bar {
  92. background-color: #E6BB48;
  93. }
  94. .ui.indicating.progress[data-percent^="6"] .bar {
  95. background-color: #DDC928;
  96. }
  97. .ui.indicating.progress[data-percent^="7"] .bar,
  98. .ui.indicating.progress[data-percent^="8"] .bar {
  99. background-color: #B4D95C;
  100. }
  101. .ui.indicating.progress[data-percent^="9"] .bar,
  102. .ui.indicating.progress[data-percent^="100"] .bar {
  103. background-color: #66DA81;
  104. }
  105. /* Indicating Label */
  106. .ui.indicating.progress[data-percent^="1"] .label,
  107. .ui.indicating.progress[data-percent^="2"] .label {
  108. color: rgba(0, 0, 0, 0.87);
  109. }
  110. .ui.indicating.progress[data-percent^="3"] .label {
  111. color: rgba(0, 0, 0, 0.87);
  112. }
  113. .ui.indicating.progress[data-percent^="4"] .label,
  114. .ui.indicating.progress[data-percent^="5"] .label {
  115. color: rgba(0, 0, 0, 0.87);
  116. }
  117. .ui.indicating.progress[data-percent^="6"] .label {
  118. color: rgba(0, 0, 0, 0.87);
  119. }
  120. .ui.indicating.progress[data-percent^="7"] .label,
  121. .ui.indicating.progress[data-percent^="8"] .label {
  122. color: rgba(0, 0, 0, 0.87);
  123. }
  124. .ui.indicating.progress[data-percent^="9"] .label,
  125. .ui.indicating.progress[data-percent^="100"] .label {
  126. color: rgba(0, 0, 0, 0.87);
  127. }
  128. /* Single Digits */
  129. .ui.indicating.progress[data-percent="1"] .bar,
  130. .ui.indicating.progress[data-percent="2"] .bar,
  131. .ui.indicating.progress[data-percent="3"] .bar,
  132. .ui.indicating.progress[data-percent="4"] .bar,
  133. .ui.indicating.progress[data-percent="5"] .bar,
  134. .ui.indicating.progress[data-percent="6"] .bar,
  135. .ui.indicating.progress[data-percent="7"] .bar,
  136. .ui.indicating.progress[data-percent="8"] .bar,
  137. .ui.indicating.progress[data-percent="9"] .bar {
  138. background-color: #D95C5C;
  139. }
  140. .ui.indicating.progress[data-percent="1"] .label,
  141. .ui.indicating.progress[data-percent="2"] .label,
  142. .ui.indicating.progress[data-percent="3"] .label,
  143. .ui.indicating.progress[data-percent="4"] .label,
  144. .ui.indicating.progress[data-percent="5"] .label,
  145. .ui.indicating.progress[data-percent="6"] .label,
  146. .ui.indicating.progress[data-percent="7"] .label,
  147. .ui.indicating.progress[data-percent="8"] .label,
  148. .ui.indicating.progress[data-percent="9"] .label {
  149. color: rgba(0, 0, 0, 0.87);
  150. }
  151. /* Indicating Success */
  152. .ui.indicating.progress.success .label {
  153. color: #1A531B;
  154. }
  155. /*******************************
  156. States
  157. *******************************/
  158. /*--------------
  159. Success
  160. ---------------*/
  161. .ui.progress.success .bar {
  162. background-color: #21BA45 !important;
  163. }
  164. .ui.progress.success .bar,
  165. .ui.progress.success .bar::after {
  166. -webkit-animation: none !important;
  167. animation: none !important;
  168. }
  169. .ui.progress.success > .label {
  170. color: #1A531B;
  171. }
  172. /*--------------
  173. Warning
  174. ---------------*/
  175. .ui.progress.warning .bar {
  176. background-color: #F2C037 !important;
  177. }
  178. .ui.progress.warning .bar,
  179. .ui.progress.warning .bar::after {
  180. -webkit-animation: none !important;
  181. animation: none !important;
  182. }
  183. .ui.progress.warning > .label {
  184. color: #794B02;
  185. }
  186. /*--------------
  187. Error
  188. ---------------*/
  189. .ui.progress.error .bar {
  190. background-color: #DB2828 !important;
  191. }
  192. .ui.progress.error .bar,
  193. .ui.progress.error .bar::after {
  194. -webkit-animation: none !important;
  195. animation: none !important;
  196. }
  197. .ui.progress.error > .label {
  198. color: #912D2B;
  199. }
  200. /*--------------
  201. Active
  202. ---------------*/
  203. .ui.active.progress .bar {
  204. position: relative;
  205. min-width: 2em;
  206. }
  207. .ui.active.progress .bar::after {
  208. content: '';
  209. opacity: 0;
  210. position: absolute;
  211. top: 0px;
  212. left: 0px;
  213. right: 0px;
  214. bottom: 0px;
  215. background: #FFFFFF;
  216. border-radius: 0.28571429rem;
  217. -webkit-animation: progress-active 2s ease infinite;
  218. animation: progress-active 2s ease infinite;
  219. }
  220. @-webkit-keyframes progress-active {
  221. 0% {
  222. opacity: 0.3;
  223. width: 0;
  224. }
  225. 100% {
  226. opacity: 0;
  227. width: 100%;
  228. }
  229. }
  230. @keyframes progress-active {
  231. 0% {
  232. opacity: 0.3;
  233. width: 0;
  234. }
  235. 100% {
  236. opacity: 0;
  237. width: 100%;
  238. }
  239. }
  240. /*--------------
  241. Disabled
  242. ---------------*/
  243. .ui.disabled.progress {
  244. opacity: 0.35;
  245. }
  246. .ui.disabled.progress .bar,
  247. .ui.disabled.progress .bar::after {
  248. -webkit-animation: none !important;
  249. animation: none !important;
  250. }
  251. /*******************************
  252. Variations
  253. *******************************/
  254. /*--------------
  255. Inverted
  256. ---------------*/
  257. .ui.inverted.progress {
  258. background: rgba(255, 255, 255, 0.08);
  259. border: none;
  260. }
  261. .ui.inverted.progress .bar {
  262. background: #888888;
  263. }
  264. .ui.inverted.progress .bar > .progress {
  265. color: #F9FAFB;
  266. }
  267. .ui.inverted.progress > .label {
  268. color: #FFFFFF;
  269. }
  270. .ui.inverted.progress.success > .label {
  271. color: #21BA45;
  272. }
  273. .ui.inverted.progress.warning > .label {
  274. color: #F2C037;
  275. }
  276. .ui.inverted.progress.error > .label {
  277. color: #DB2828;
  278. }
  279. /*--------------
  280. Attached
  281. ---------------*/
  282. /* bottom attached */
  283. .ui.progress.attached {
  284. background: transparent;
  285. position: relative;
  286. border: none;
  287. margin: 0em;
  288. }
  289. .ui.progress.attached,
  290. .ui.progress.attached .bar {
  291. display: block;
  292. height: 0.2rem;
  293. padding: 0px;
  294. overflow: hidden;
  295. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  296. }
  297. .ui.progress.attached .bar {
  298. border-radius: 0em;
  299. }
  300. /* top attached */
  301. .ui.progress.top.attached,
  302. .ui.progress.top.attached .bar {
  303. top: 0px;
  304. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  305. }
  306. .ui.progress.top.attached .bar {
  307. border-radius: 0em;
  308. }
  309. /* Coupling */
  310. .ui.segment > .ui.attached.progress,
  311. .ui.card > .ui.attached.progress {
  312. position: absolute;
  313. top: auto;
  314. left: 0;
  315. bottom: 100%;
  316. width: 100%;
  317. }
  318. .ui.segment > .ui.bottom.attached.progress,
  319. .ui.card > .ui.bottom.attached.progress {
  320. top: 100%;
  321. bottom: auto;
  322. }
  323. /*--------------
  324. Colors
  325. ---------------*/
  326. /* Red */
  327. .ui.red.progress .bar {
  328. background-color: #DB2828;
  329. }
  330. .ui.red.inverted.progress .bar {
  331. background-color: #FF695E;
  332. }
  333. /* Orange */
  334. .ui.orange.progress .bar {
  335. background-color: #F2711C;
  336. }
  337. .ui.orange.inverted.progress .bar {
  338. background-color: #FF851B;
  339. }
  340. /* Yellow */
  341. .ui.yellow.progress .bar {
  342. background-color: #FBBD08;
  343. }
  344. .ui.yellow.inverted.progress .bar {
  345. background-color: #FFE21F;
  346. }
  347. /* Olive */
  348. .ui.olive.progress .bar {
  349. background-color: #B5CC18;
  350. }
  351. .ui.olive.inverted.progress .bar {
  352. background-color: #D9E778;
  353. }
  354. /* Green */
  355. .ui.green.progress .bar {
  356. background-color: #21BA45;
  357. }
  358. .ui.green.inverted.progress .bar {
  359. background-color: #2ECC40;
  360. }
  361. /* Teal */
  362. .ui.teal.progress .bar {
  363. background-color: #00B5AD;
  364. }
  365. .ui.teal.inverted.progress .bar {
  366. background-color: #6DFFFF;
  367. }
  368. /* Blue */
  369. .ui.blue.progress .bar {
  370. background-color: #2185D0;
  371. }
  372. .ui.blue.inverted.progress .bar {
  373. background-color: #54C8FF;
  374. }
  375. /* Violet */
  376. .ui.violet.progress .bar {
  377. background-color: #6435C9;
  378. }
  379. .ui.violet.inverted.progress .bar {
  380. background-color: #A291FB;
  381. }
  382. /* Purple */
  383. .ui.purple.progress .bar {
  384. background-color: #A333C8;
  385. }
  386. .ui.purple.inverted.progress .bar {
  387. background-color: #DC73FF;
  388. }
  389. /* Pink */
  390. .ui.pink.progress .bar {
  391. background-color: #E03997;
  392. }
  393. .ui.pink.inverted.progress .bar {
  394. background-color: #FF8EDF;
  395. }
  396. /* Brown */
  397. .ui.brown.progress .bar {
  398. background-color: #A5673F;
  399. }
  400. .ui.brown.inverted.progress .bar {
  401. background-color: #D67C1C;
  402. }
  403. /* Grey */
  404. .ui.grey.progress .bar {
  405. background-color: #767676;
  406. }
  407. .ui.grey.inverted.progress .bar {
  408. background-color: #DCDDDE;
  409. }
  410. /* Black */
  411. .ui.black.progress .bar {
  412. background-color: #1B1C1D;
  413. }
  414. .ui.black.inverted.progress .bar {
  415. background-color: #545454;
  416. }
  417. /*--------------
  418. Sizes
  419. ---------------*/
  420. .ui.tiny.progress {
  421. font-size: 0.85714286rem;
  422. }
  423. .ui.tiny.progress .bar {
  424. height: 0.5em;
  425. }
  426. .ui.small.progress {
  427. font-size: 0.92857143rem;
  428. }
  429. .ui.small.progress .bar {
  430. height: 1em;
  431. }
  432. .ui.progress {
  433. font-size: 1rem;
  434. }
  435. .ui.progress .bar {
  436. height: 1.75em;
  437. }
  438. .ui.large.progress {
  439. font-size: 1.14285714rem;
  440. }
  441. .ui.large.progress .bar {
  442. height: 2.5em;
  443. }
  444. .ui.big.progress {
  445. font-size: 1.28571429rem;
  446. }
  447. .ui.big.progress .bar {
  448. height: 3.5em;
  449. }
  450. /*******************************
  451. Progress
  452. *******************************/
  453. /*******************************
  454. Site Overrides
  455. *******************************/