progress.css 9.9 KB

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