progress.css 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820
  1. /*!
  2. * # Fomantic-UI - Progress Bar
  3. * http://github.com/fomantic/Fomantic-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 0 2.5em;
  19. -webkit-box-shadow: none;
  20. box-shadow: none;
  21. background: rgba(0, 0, 0, 0.1);
  22. padding: 0;
  23. border-radius: 0.28571429rem;
  24. }
  25. .ui.progress:first-child {
  26. margin: 0 0 2.5em;
  27. }
  28. .ui.progress:last-child {
  29. margin: 0 0 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. overflow: hidden;
  46. }
  47. .ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
  48. .ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
  49. background: transparent;
  50. }
  51. .ui.progress[data-percent="0"] .bar .progress {
  52. color: rgba(0, 0, 0, 0.87);
  53. }
  54. .ui.inverted.progress[data-percent="0"] .bar .progress {
  55. color: rgba(255, 255, 255, 0.9);
  56. }
  57. /* Percent Complete */
  58. .ui.progress .bar > .progress {
  59. white-space: nowrap;
  60. position: absolute;
  61. width: auto;
  62. font-size: 0.92857143em;
  63. top: 50%;
  64. right: 0.5em;
  65. left: auto;
  66. bottom: auto;
  67. color: rgba(255, 255, 255, 0.7);
  68. text-shadow: none;
  69. margin-top: -0.5em;
  70. font-weight: bold;
  71. text-align: left;
  72. }
  73. /* Label */
  74. .ui.progress > .label {
  75. position: absolute;
  76. width: 100%;
  77. font-size: 1em;
  78. top: 100%;
  79. right: auto;
  80. left: 0;
  81. bottom: auto;
  82. color: rgba(0, 0, 0, 0.87);
  83. font-weight: bold;
  84. text-shadow: none;
  85. margin-top: 0.2em;
  86. text-align: center;
  87. -webkit-transition: color 0.4s ease;
  88. transition: color 0.4s ease;
  89. }
  90. /*******************************
  91. Types
  92. *******************************/
  93. /* Indicating */
  94. .ui.indicating.progress[data-percent^="1"] .bar,
  95. .ui.indicating.progress[data-percent^="2"] .bar {
  96. background-color: #D95C5C;
  97. }
  98. .ui.indicating.progress[data-percent^="3"] .bar {
  99. background-color: #EFBC72;
  100. }
  101. .ui.indicating.progress[data-percent^="4"] .bar,
  102. .ui.indicating.progress[data-percent^="5"] .bar {
  103. background-color: #E6BB48;
  104. }
  105. .ui.indicating.progress[data-percent^="6"] .bar {
  106. background-color: #DDC928;
  107. }
  108. .ui.indicating.progress[data-percent^="7"] .bar,
  109. .ui.indicating.progress[data-percent^="8"] .bar {
  110. background-color: #B4D95C;
  111. }
  112. .ui.indicating.progress[data-percent^="9"] .bar,
  113. .ui.indicating.progress[data-percent^="100"] .bar {
  114. background-color: #66DA81;
  115. }
  116. /* Indicating Label */
  117. .ui.indicating.progress[data-percent^="1"] .label,
  118. .ui.indicating.progress[data-percent^="2"] .label {
  119. color: rgba(0, 0, 0, 0.87);
  120. }
  121. .ui.indicating.progress[data-percent^="3"] .label {
  122. color: rgba(0, 0, 0, 0.87);
  123. }
  124. .ui.indicating.progress[data-percent^="4"] .label,
  125. .ui.indicating.progress[data-percent^="5"] .label {
  126. color: rgba(0, 0, 0, 0.87);
  127. }
  128. .ui.indicating.progress[data-percent^="6"] .label {
  129. color: rgba(0, 0, 0, 0.87);
  130. }
  131. .ui.indicating.progress[data-percent^="7"] .label,
  132. .ui.indicating.progress[data-percent^="8"] .label {
  133. color: rgba(0, 0, 0, 0.87);
  134. }
  135. .ui.indicating.progress[data-percent^="9"] .label,
  136. .ui.indicating.progress[data-percent^="100"] .label {
  137. color: rgba(0, 0, 0, 0.87);
  138. }
  139. /* Inverted Indicating Label */
  140. .ui.inverted.indicating.progress[data-percent^="1"] .label,
  141. .ui.inverted.indicating.progress[data-percent^="2"] .label {
  142. color: rgba(255, 255, 255, 0.9);
  143. }
  144. .ui.inverted.indicating.progress[data-percent^="3"] .label {
  145. color: rgba(255, 255, 255, 0.9);
  146. }
  147. .ui.inverted.indicating.progress[data-percent^="4"] .label,
  148. .ui.inverted.indicating.progress[data-percent^="5"] .label {
  149. color: rgba(255, 255, 255, 0.9);
  150. }
  151. .ui.inverted.indicating.progress[data-percent^="6"] .label {
  152. color: rgba(255, 255, 255, 0.9);
  153. }
  154. .ui.inverted.indicating.progress[data-percent^="7"] .label,
  155. .ui.inverted.indicating.progress[data-percent^="8"] .label {
  156. color: rgba(255, 255, 255, 0.9);
  157. }
  158. .ui.inverted.indicating.progress[data-percent^="9"] .label,
  159. .ui.inverted.indicating.progress[data-percent^="100"] .label {
  160. color: rgba(255, 255, 255, 0.9);
  161. }
  162. /* Single Digits */
  163. .ui.indicating.progress[data-percent="1"] .bar,
  164. .ui.indicating.progress[data-percent="2"] .bar,
  165. .ui.indicating.progress[data-percent="3"] .bar,
  166. .ui.indicating.progress[data-percent="4"] .bar,
  167. .ui.indicating.progress[data-percent="5"] .bar,
  168. .ui.indicating.progress[data-percent="6"] .bar,
  169. .ui.indicating.progress[data-percent="7"] .bar,
  170. .ui.indicating.progress[data-percent="8"] .bar,
  171. .ui.indicating.progress[data-percent="9"] .bar {
  172. background-color: #D95C5C;
  173. }
  174. .ui.indicating.progress[data-percent="0"] .label,
  175. .ui.indicating.progress[data-percent="1"] .label,
  176. .ui.indicating.progress[data-percent="2"] .label,
  177. .ui.indicating.progress[data-percent="3"] .label,
  178. .ui.indicating.progress[data-percent="4"] .label,
  179. .ui.indicating.progress[data-percent="5"] .label,
  180. .ui.indicating.progress[data-percent="6"] .label,
  181. .ui.indicating.progress[data-percent="7"] .label,
  182. .ui.indicating.progress[data-percent="8"] .label,
  183. .ui.indicating.progress[data-percent="9"] .label {
  184. color: rgba(0, 0, 0, 0.87);
  185. }
  186. .ui.inverted.indicating.progress[data-percent="0"] .label,
  187. .ui.inverted.indicating.progress[data-percent="1"] .label,
  188. .ui.inverted.indicating.progress[data-percent="2"] .label,
  189. .ui.inverted.indicating.progress[data-percent="3"] .label,
  190. .ui.inverted.indicating.progress[data-percent="4"] .label,
  191. .ui.inverted.indicating.progress[data-percent="5"] .label,
  192. .ui.inverted.indicating.progress[data-percent="6"] .label,
  193. .ui.inverted.indicating.progress[data-percent="7"] .label,
  194. .ui.inverted.indicating.progress[data-percent="8"] .label,
  195. .ui.inverted.indicating.progress[data-percent="9"] .label {
  196. color: rgba(255, 255, 255, 0.9);
  197. }
  198. /* Indicating Success */
  199. .ui.ui.indicating.progress.success .label {
  200. color: #1A531B;
  201. }
  202. /* Multiple */
  203. .ui.multiple.progress {
  204. display: -webkit-box;
  205. display: -ms-flexbox;
  206. display: flex;
  207. }
  208. /*******************************
  209. States
  210. *******************************/
  211. /*--------------
  212. Success
  213. ---------------*/
  214. .ui.ui.progress.success .bar {
  215. background-color: #21BA45;
  216. }
  217. .ui.ui.progress.success .bar,
  218. .ui.ui.progress.success .bar::after {
  219. -webkit-animation: none;
  220. animation: none;
  221. }
  222. .ui.progress.success > .label {
  223. color: #1A531B;
  224. }
  225. /*--------------
  226. Warning
  227. ---------------*/
  228. .ui.ui.progress.warning .bar {
  229. background-color: #F2C037;
  230. }
  231. .ui.ui.progress.warning .bar,
  232. .ui.ui.progress.warning .bar::after {
  233. -webkit-animation: none;
  234. animation: none;
  235. }
  236. .ui.progress.warning > .label {
  237. color: #794B02;
  238. }
  239. /*--------------
  240. Error
  241. ---------------*/
  242. .ui.ui.progress.error .bar {
  243. background-color: #DB2828;
  244. }
  245. .ui.ui.progress.error .bar,
  246. .ui.ui.progress.error .bar::after {
  247. -webkit-animation: none;
  248. animation: none;
  249. }
  250. .ui.progress.error > .label {
  251. color: #912D2B;
  252. }
  253. /*--------------
  254. Active
  255. ---------------*/
  256. .ui.active.progress .bar {
  257. position: relative;
  258. min-width: 2em;
  259. }
  260. .ui.active.progress .bar::after {
  261. content: '';
  262. opacity: 0;
  263. position: absolute;
  264. top: 0;
  265. left: 0;
  266. right: 0;
  267. bottom: 0;
  268. background: #FFFFFF;
  269. border-radius: 0.28571429rem;
  270. -webkit-animation: progress-active 2s ease infinite;
  271. animation: progress-active 2s ease infinite;
  272. -webkit-transform-origin: left;
  273. transform-origin: left;
  274. }
  275. @-webkit-keyframes progress-active {
  276. 0% {
  277. opacity: 0.3;
  278. -webkit-transform: scale(0, 1);
  279. transform: scale(0, 1);
  280. }
  281. 100% {
  282. opacity: 0;
  283. -webkit-transform: scale(1);
  284. transform: scale(1);
  285. }
  286. }
  287. @keyframes progress-active {
  288. 0% {
  289. opacity: 0.3;
  290. -webkit-transform: scale(0, 1);
  291. transform: scale(0, 1);
  292. }
  293. 100% {
  294. opacity: 0;
  295. -webkit-transform: scale(1);
  296. transform: scale(1);
  297. }
  298. }
  299. /*--------------
  300. Disabled
  301. ---------------*/
  302. .ui.disabled.progress {
  303. opacity: 0.35;
  304. }
  305. .ui.ui.disabled.progress .bar,
  306. .ui.ui.disabled.progress .bar::after {
  307. -webkit-animation: none;
  308. animation: none;
  309. }
  310. /*******************************
  311. Variations
  312. *******************************/
  313. /*--------------
  314. Inverted
  315. ---------------*/
  316. .ui.inverted.progress {
  317. background: rgba(255, 255, 255, 0.08);
  318. border: none;
  319. }
  320. .ui.inverted.progress .bar {
  321. background: #888888;
  322. }
  323. .ui.inverted.progress .bar > .progress {
  324. color: #1B1C1D;
  325. }
  326. .ui.inverted.progress > .label {
  327. color: #FFFFFF;
  328. }
  329. .ui.inverted.progress.success > .label {
  330. color: #21BA45;
  331. }
  332. .ui.inverted.progress.warning > .label {
  333. color: #F2C037;
  334. }
  335. .ui.inverted.progress.error > .label {
  336. color: #DB2828;
  337. }
  338. /*--------------
  339. Attached
  340. ---------------*/
  341. /* bottom attached */
  342. .ui.progress.attached {
  343. background: transparent;
  344. position: relative;
  345. border: none;
  346. margin: 0;
  347. }
  348. .ui.progress.attached,
  349. .ui.progress.attached .bar {
  350. display: block;
  351. height: 0.2rem;
  352. padding: 0;
  353. overflow: hidden;
  354. border-radius: 0 0 0.28571429rem 0.28571429rem;
  355. }
  356. .ui.progress.attached .bar {
  357. border-radius: 0;
  358. }
  359. /* top attached */
  360. .ui.progress.top.attached,
  361. .ui.progress.top.attached .bar {
  362. top: 0;
  363. border-radius: 0.28571429rem 0.28571429rem 0 0;
  364. }
  365. .ui.progress.top.attached .bar {
  366. border-radius: 0;
  367. }
  368. /* Coupling */
  369. .ui.segment > .ui.attached.progress,
  370. .ui.card > .ui.attached.progress {
  371. position: absolute;
  372. top: auto;
  373. left: 0;
  374. bottom: 100%;
  375. width: 100%;
  376. }
  377. .ui.segment > .ui.bottom.attached.progress,
  378. .ui.card > .ui.bottom.attached.progress {
  379. top: 100%;
  380. bottom: auto;
  381. }
  382. /*--------------
  383. Colors
  384. ---------------*/
  385. .ui.indeterminate.primary.progress .bar::before,
  386. .ui.primary.progress .bar,
  387. .ui.progress .primary.bar {
  388. background-color: #2185D0;
  389. }
  390. .ui.inverted.indeterminate.primary.progress .bar::before,
  391. .ui.primary.inverted.progress .bar,
  392. .ui.inverted.progress .primary.bar {
  393. background-color: #54C8FF;
  394. }
  395. .ui.indeterminate.secondary.progress .bar::before,
  396. .ui.secondary.progress .bar,
  397. .ui.progress .secondary.bar {
  398. background-color: #1B1C1D;
  399. }
  400. .ui.inverted.indeterminate.secondary.progress .bar::before,
  401. .ui.secondary.inverted.progress .bar,
  402. .ui.inverted.progress .secondary.bar {
  403. background-color: #545454;
  404. }
  405. .ui.indeterminate.red.progress .bar::before,
  406. .ui.red.progress .bar,
  407. .ui.progress .red.bar {
  408. background-color: #DB2828;
  409. }
  410. .ui.inverted.indeterminate.red.progress .bar::before,
  411. .ui.red.inverted.progress .bar,
  412. .ui.inverted.progress .red.bar {
  413. background-color: #FF695E;
  414. }
  415. .ui.indeterminate.orange.progress .bar::before,
  416. .ui.orange.progress .bar,
  417. .ui.progress .orange.bar {
  418. background-color: #F2711C;
  419. }
  420. .ui.inverted.indeterminate.orange.progress .bar::before,
  421. .ui.orange.inverted.progress .bar,
  422. .ui.inverted.progress .orange.bar {
  423. background-color: #FF851B;
  424. }
  425. .ui.indeterminate.yellow.progress .bar::before,
  426. .ui.yellow.progress .bar,
  427. .ui.progress .yellow.bar {
  428. background-color: #FBBD08;
  429. }
  430. .ui.inverted.indeterminate.yellow.progress .bar::before,
  431. .ui.yellow.inverted.progress .bar,
  432. .ui.inverted.progress .yellow.bar {
  433. background-color: #FFE21F;
  434. }
  435. .ui.indeterminate.olive.progress .bar::before,
  436. .ui.olive.progress .bar,
  437. .ui.progress .olive.bar {
  438. background-color: #B5CC18;
  439. }
  440. .ui.inverted.indeterminate.olive.progress .bar::before,
  441. .ui.olive.inverted.progress .bar,
  442. .ui.inverted.progress .olive.bar {
  443. background-color: #D9E778;
  444. }
  445. .ui.indeterminate.green.progress .bar::before,
  446. .ui.green.progress .bar,
  447. .ui.progress .green.bar {
  448. background-color: #21BA45;
  449. }
  450. .ui.inverted.indeterminate.green.progress .bar::before,
  451. .ui.green.inverted.progress .bar,
  452. .ui.inverted.progress .green.bar {
  453. background-color: #2ECC40;
  454. }
  455. .ui.indeterminate.teal.progress .bar::before,
  456. .ui.teal.progress .bar,
  457. .ui.progress .teal.bar {
  458. background-color: #00B5AD;
  459. }
  460. .ui.inverted.indeterminate.teal.progress .bar::before,
  461. .ui.teal.inverted.progress .bar,
  462. .ui.inverted.progress .teal.bar {
  463. background-color: #6DFFFF;
  464. }
  465. .ui.indeterminate.blue.progress .bar::before,
  466. .ui.blue.progress .bar,
  467. .ui.progress .blue.bar {
  468. background-color: #2185D0;
  469. }
  470. .ui.inverted.indeterminate.blue.progress .bar::before,
  471. .ui.blue.inverted.progress .bar,
  472. .ui.inverted.progress .blue.bar {
  473. background-color: #54C8FF;
  474. }
  475. .ui.indeterminate.violet.progress .bar::before,
  476. .ui.violet.progress .bar,
  477. .ui.progress .violet.bar {
  478. background-color: #6435C9;
  479. }
  480. .ui.inverted.indeterminate.violet.progress .bar::before,
  481. .ui.violet.inverted.progress .bar,
  482. .ui.inverted.progress .violet.bar {
  483. background-color: #A291FB;
  484. }
  485. .ui.indeterminate.purple.progress .bar::before,
  486. .ui.purple.progress .bar,
  487. .ui.progress .purple.bar {
  488. background-color: #A333C8;
  489. }
  490. .ui.inverted.indeterminate.purple.progress .bar::before,
  491. .ui.purple.inverted.progress .bar,
  492. .ui.inverted.progress .purple.bar {
  493. background-color: #DC73FF;
  494. }
  495. .ui.indeterminate.pink.progress .bar::before,
  496. .ui.pink.progress .bar,
  497. .ui.progress .pink.bar {
  498. background-color: #E03997;
  499. }
  500. .ui.inverted.indeterminate.pink.progress .bar::before,
  501. .ui.pink.inverted.progress .bar,
  502. .ui.inverted.progress .pink.bar {
  503. background-color: #FF8EDF;
  504. }
  505. .ui.indeterminate.brown.progress .bar::before,
  506. .ui.brown.progress .bar,
  507. .ui.progress .brown.bar {
  508. background-color: #A5673F;
  509. }
  510. .ui.inverted.indeterminate.brown.progress .bar::before,
  511. .ui.brown.inverted.progress .bar,
  512. .ui.inverted.progress .brown.bar {
  513. background-color: #D67C1C;
  514. }
  515. .ui.indeterminate.grey.progress .bar::before,
  516. .ui.grey.progress .bar,
  517. .ui.progress .grey.bar {
  518. background-color: #767676;
  519. }
  520. .ui.inverted.indeterminate.grey.progress .bar::before,
  521. .ui.grey.inverted.progress .bar,
  522. .ui.inverted.progress .grey.bar {
  523. background-color: #DCDDDE;
  524. }
  525. .ui.indeterminate.black.progress .bar::before,
  526. .ui.black.progress .bar,
  527. .ui.progress .black.bar {
  528. background-color: #1B1C1D;
  529. }
  530. .ui.inverted.indeterminate.black.progress .bar::before,
  531. .ui.black.inverted.progress .bar,
  532. .ui.inverted.progress .black.bar {
  533. background-color: #545454;
  534. }
  535. /*--------------
  536. Sizes
  537. ---------------*/
  538. .ui.progress {
  539. font-size: 1rem;
  540. }
  541. .ui.progress .bar {
  542. height: 1.75em;
  543. }
  544. .ui.mini.progress {
  545. font-size: 0.78571429rem;
  546. }
  547. .ui.mini.progress .bar {
  548. height: 0.3em;
  549. }
  550. .ui.tiny.progress {
  551. font-size: 0.85714286rem;
  552. }
  553. .ui.tiny.progress .bar {
  554. height: 0.5em;
  555. }
  556. .ui.small.progress {
  557. font-size: 0.92857143rem;
  558. }
  559. .ui.small.progress .bar {
  560. height: 1em;
  561. }
  562. .ui.large.progress {
  563. font-size: 1.14285714rem;
  564. }
  565. .ui.large.progress .bar {
  566. height: 2.5em;
  567. }
  568. .ui.big.progress {
  569. font-size: 1.28571429rem;
  570. }
  571. .ui.big.progress .bar {
  572. height: 3.5em;
  573. }
  574. .ui.huge.progress {
  575. font-size: 1.42857143rem;
  576. }
  577. .ui.huge.progress .bar {
  578. height: 4em;
  579. }
  580. .ui.massive.progress {
  581. font-size: 1.71428571rem;
  582. }
  583. .ui.massive.progress .bar {
  584. height: 5em;
  585. }
  586. /*---------------
  587. Indeterminate
  588. ----------------*/
  589. .ui.indeterminate.progress .bar {
  590. width: 100%;
  591. }
  592. .ui.indeterminate.progress .bar .progress,
  593. .ui.progress .bar .centered.progress {
  594. text-align: center;
  595. position: relative;
  596. }
  597. .ui.indeterminate.progress .bar::before {
  598. content: '';
  599. position: absolute;
  600. top: 0;
  601. bottom: 0;
  602. border-radius: 0.28571429rem;
  603. -webkit-animation: progress-pulsating 2s ease infinite;
  604. animation: progress-pulsating 2s ease infinite;
  605. -webkit-transform-origin: center;
  606. transform-origin: center;
  607. width: 100%;
  608. }
  609. .ui.slow.indeterminate.progress .bar::before {
  610. -webkit-animation-duration: 4s;
  611. animation-duration: 4s;
  612. }
  613. .ui.fast.indeterminate.progress .bar::before {
  614. -webkit-animation-duration: 1s;
  615. animation-duration: 1s;
  616. }
  617. .ui.swinging.indeterminate.progress .bar::before {
  618. -webkit-transform-origin: left;
  619. transform-origin: left;
  620. -webkit-animation-name: progress-swinging;
  621. animation-name: progress-swinging;
  622. }
  623. .ui.sliding.indeterminate.progress .bar::before {
  624. -webkit-transform-origin: left;
  625. transform-origin: left;
  626. -webkit-animation-name: progress-sliding;
  627. animation-name: progress-sliding;
  628. }
  629. .ui.filling.indeterminate.progress .bar::before {
  630. -webkit-animation-name: progress-filling;
  631. animation-name: progress-filling;
  632. }
  633. .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
  634. background: #FFFFFF;
  635. }
  636. .ui.sliding.indeterminate.progress .bar,
  637. .ui.swinging.indeterminate.progress .bar,
  638. .ui.filling.indeterminate.progress .bar {
  639. background: rgba(0, 0, 0, 0.1);
  640. }
  641. .ui.sliding.indeterminate.progress .bar .progress,
  642. .ui.swinging.indeterminate.progress .bar .progress {
  643. color: #1B1C1D;
  644. }
  645. .ui.inverted.sliding.indeterminate.progress .bar,
  646. .ui.inverted.swinging.indeterminate.progress .bar,
  647. .ui.inverted.filling.indeterminate.progress .bar {
  648. background: rgba(255, 255, 255, 0.08);
  649. }
  650. .ui.inverted.sliding.indeterminate.progress .bar .progress,
  651. .ui.inverted.swinging.indeterminate.progress .bar .progress {
  652. color: rgba(255, 255, 255, 0.7);
  653. }
  654. @-webkit-keyframes progress-swinging {
  655. 0%,
  656. 100% {
  657. width: 10%;
  658. left: -25%;
  659. }
  660. 25%,
  661. 65% {
  662. width: 70%;
  663. }
  664. 50% {
  665. width: 10%;
  666. left: 100%;
  667. }
  668. }
  669. @keyframes progress-swinging {
  670. 0%,
  671. 100% {
  672. width: 10%;
  673. left: -25%;
  674. }
  675. 25%,
  676. 65% {
  677. width: 70%;
  678. }
  679. 50% {
  680. width: 10%;
  681. left: 100%;
  682. }
  683. }
  684. @-webkit-keyframes progress-sliding {
  685. 0% {
  686. width: 10%;
  687. left: -25%;
  688. }
  689. 50% {
  690. width: 70%;
  691. }
  692. 100% {
  693. width: 10%;
  694. left: 100%;
  695. }
  696. }
  697. @keyframes progress-sliding {
  698. 0% {
  699. width: 10%;
  700. left: -25%;
  701. }
  702. 50% {
  703. width: 70%;
  704. }
  705. 100% {
  706. width: 10%;
  707. left: 100%;
  708. }
  709. }
  710. @-webkit-keyframes progress-filling {
  711. 0% {
  712. -webkit-transform: scale(0, 1);
  713. transform: scale(0, 1);
  714. }
  715. 80% {
  716. -webkit-transform: scale(1);
  717. transform: scale(1);
  718. opacity: 1;
  719. }
  720. 100% {
  721. opacity: 0;
  722. }
  723. }
  724. @keyframes progress-filling {
  725. 0% {
  726. -webkit-transform: scale(0, 1);
  727. transform: scale(0, 1);
  728. }
  729. 80% {
  730. -webkit-transform: scale(1);
  731. transform: scale(1);
  732. opacity: 1;
  733. }
  734. 100% {
  735. opacity: 0;
  736. }
  737. }
  738. @-webkit-keyframes progress-pulsating {
  739. 0% {
  740. -webkit-transform: scale(0, 1);
  741. transform: scale(0, 1);
  742. opacity: 0.7;
  743. }
  744. 100% {
  745. -webkit-transform: scale(1);
  746. transform: scale(1);
  747. opacity: 0;
  748. }
  749. }
  750. @keyframes progress-pulsating {
  751. 0% {
  752. -webkit-transform: scale(0, 1);
  753. transform: scale(0, 1);
  754. opacity: 0.7;
  755. }
  756. 100% {
  757. -webkit-transform: scale(1);
  758. transform: scale(1);
  759. opacity: 0;
  760. }
  761. }
  762. /*******************************
  763. Progress
  764. *******************************/
  765. /*******************************
  766. Site Overrides
  767. *******************************/