loader.css 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871
  1. /*!
  2. * # Fomantic-UI - Loader
  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. Loader
  12. *******************************/
  13. /* Standard Size */
  14. .ui.loader {
  15. display: none;
  16. position: absolute;
  17. top: 50%;
  18. left: 50%;
  19. margin: 0;
  20. text-align: center;
  21. z-index: 1000;
  22. -webkit-transform: translateX(-50%) translateY(-50%);
  23. transform: translateX(-50%) translateY(-50%);
  24. }
  25. /* Static Shape */
  26. .ui.loader:before {
  27. position: absolute;
  28. content: '';
  29. top: 0;
  30. left: 50%;
  31. width: 100%;
  32. height: 100%;
  33. border-radius: 500rem;
  34. border: 0.2em solid rgba(0, 0, 0, 0.1);
  35. }
  36. /* Active Shape */
  37. .ui.loader:after {
  38. position: absolute;
  39. content: '';
  40. top: 0;
  41. left: 50%;
  42. width: 100%;
  43. height: 100%;
  44. -webkit-animation: loader 0.6s infinite linear;
  45. animation: loader 0.6s infinite linear;
  46. border: 0.2em solid #767676;
  47. border-radius: 500rem;
  48. -webkit-box-shadow: 0 0 0 1px transparent;
  49. box-shadow: 0 0 0 1px transparent;
  50. }
  51. /* Speeds */
  52. .ui.fast.loading.loading:after,
  53. .ui.fast.loading.loading .input > i.icon:after,
  54. .ui.fast.loading.loading > i.icon:after,
  55. .ui.fast.loader:after {
  56. -webkit-animation-duration: 0.3s;
  57. animation-duration: 0.3s;
  58. }
  59. .ui.slow.loading.loading:after,
  60. .ui.slow.loading.loading .input > i.icon:after,
  61. .ui.slow.loading.loading > i.icon:after,
  62. .ui.slow.loader:after {
  63. -webkit-animation-duration: 0.9s;
  64. animation-duration: 0.9s;
  65. }
  66. /* Active Animation */
  67. @-webkit-keyframes loader {
  68. 100% {
  69. -webkit-transform: rotate(360deg);
  70. transform: rotate(360deg);
  71. }
  72. }
  73. @keyframes loader {
  74. 100% {
  75. -webkit-transform: rotate(360deg);
  76. transform: rotate(360deg);
  77. }
  78. }
  79. /*-------------------
  80. Coupling
  81. --------------------*/
  82. /* Show inside active dimmer */
  83. .ui.dimmer > .loader {
  84. display: block;
  85. }
  86. /* Black Dimmer */
  87. .ui.dimmer > .ui.loader {
  88. color: rgba(255, 255, 255, 0.9);
  89. }
  90. .ui.dimmer > .ui.loader:not(.elastic):before {
  91. border-color: rgba(255, 255, 255, 0.15);
  92. }
  93. /* White Dimmer (Inverted) */
  94. .ui.inverted.dimmer > .ui.loader {
  95. color: rgba(0, 0, 0, 0.87);
  96. }
  97. .ui.inverted.dimmer > .ui.loader:not(.elastic):before {
  98. border-color: rgba(0, 0, 0, 0.1);
  99. }
  100. /*******************************
  101. Types
  102. *******************************/
  103. /*-------------------
  104. Text
  105. --------------------*/
  106. .ui.ui.ui.ui.text.loader {
  107. width: auto;
  108. height: auto;
  109. text-align: center;
  110. font-style: normal;
  111. }
  112. /*******************************
  113. States
  114. *******************************/
  115. .ui.indeterminate.loader:after {
  116. animation-direction: reverse;
  117. -webkit-animation-duration: 1.2s;
  118. animation-duration: 1.2s;
  119. }
  120. .ui.loader.active,
  121. .ui.loader.visible {
  122. display: block;
  123. }
  124. .ui.loader.disabled,
  125. .ui.loader.hidden {
  126. display: none;
  127. }
  128. /*******************************
  129. Variations
  130. *******************************/
  131. /*-------------------
  132. Sizes
  133. --------------------*/
  134. .ui.loader {
  135. width: 2.28571429rem;
  136. height: 2.28571429rem;
  137. font-size: 1em;
  138. }
  139. .ui.loader:before,
  140. .ui.loader:after {
  141. width: 2.28571429rem;
  142. height: 2.28571429rem;
  143. margin: 0 0 0 -1.14285714rem;
  144. }
  145. .ui.text.loader {
  146. min-width: 2.28571429rem;
  147. padding-top: 3.07142857rem;
  148. }
  149. .ui.mini.loader {
  150. width: 1rem;
  151. height: 1rem;
  152. font-size: 0.78571429em;
  153. }
  154. .ui.mini.loader:before,
  155. .ui.mini.loader:after {
  156. width: 1rem;
  157. height: 1rem;
  158. margin: 0 0 0 -0.5rem;
  159. }
  160. .ui.mini.text.loader {
  161. min-width: 1rem;
  162. padding-top: 1.78571429rem;
  163. }
  164. .ui.tiny.loader {
  165. width: 1.14285714rem;
  166. height: 1.14285714rem;
  167. font-size: 0.85714286em;
  168. }
  169. .ui.tiny.loader:before,
  170. .ui.tiny.loader:after {
  171. width: 1.14285714rem;
  172. height: 1.14285714rem;
  173. margin: 0 0 0 -0.57142857rem;
  174. }
  175. .ui.tiny.text.loader {
  176. min-width: 1.14285714rem;
  177. padding-top: 1.92857143rem;
  178. }
  179. .ui.small.loader {
  180. width: 1.71428571rem;
  181. height: 1.71428571rem;
  182. font-size: 0.92857143em;
  183. }
  184. .ui.small.loader:before,
  185. .ui.small.loader:after {
  186. width: 1.71428571rem;
  187. height: 1.71428571rem;
  188. margin: 0 0 0 -0.85714286rem;
  189. }
  190. .ui.small.text.loader {
  191. min-width: 1.71428571rem;
  192. padding-top: 2.5rem;
  193. }
  194. .ui.large.loader {
  195. width: 3.42857143rem;
  196. height: 3.42857143rem;
  197. font-size: 1.14285714em;
  198. }
  199. .ui.large.loader:before,
  200. .ui.large.loader:after {
  201. width: 3.42857143rem;
  202. height: 3.42857143rem;
  203. margin: 0 0 0 -1.71428571rem;
  204. }
  205. .ui.large.text.loader {
  206. min-width: 3.42857143rem;
  207. padding-top: 4.21428571rem;
  208. }
  209. .ui.big.loader {
  210. width: 3.71428571rem;
  211. height: 3.71428571rem;
  212. font-size: 1.28571429em;
  213. }
  214. .ui.big.loader:before,
  215. .ui.big.loader:after {
  216. width: 3.71428571rem;
  217. height: 3.71428571rem;
  218. margin: 0 0 0 -1.85714286rem;
  219. }
  220. .ui.big.text.loader {
  221. min-width: 3.71428571rem;
  222. padding-top: 4.5rem;
  223. }
  224. .ui.huge.loader {
  225. width: 4.14285714rem;
  226. height: 4.14285714rem;
  227. font-size: 1.42857143em;
  228. }
  229. .ui.huge.loader:before,
  230. .ui.huge.loader:after {
  231. width: 4.14285714rem;
  232. height: 4.14285714rem;
  233. margin: 0 0 0 -2.07142857rem;
  234. }
  235. .ui.huge.text.loader {
  236. min-width: 4.14285714rem;
  237. padding-top: 4.92857143rem;
  238. }
  239. .ui.massive.loader {
  240. width: 4.57142857rem;
  241. height: 4.57142857rem;
  242. font-size: 1.71428571em;
  243. }
  244. .ui.massive.loader:before,
  245. .ui.massive.loader:after {
  246. width: 4.57142857rem;
  247. height: 4.57142857rem;
  248. margin: 0 0 0 -2.28571429rem;
  249. }
  250. .ui.massive.text.loader {
  251. min-width: 4.57142857rem;
  252. padding-top: 5.35714286rem;
  253. }
  254. /*-------------------
  255. Colors
  256. --------------------*/
  257. .ui.primary.elastic.loader.loader:before,
  258. .ui.primary.basic.elastic.loading.button:before,
  259. .ui.primary.basic.elastic.loading.button:after,
  260. .ui.primary.elastic.loading.loading.loading:not(.segment):before,
  261. .ui.primary.elastic.loading.loading.loading .input > i.icon:before,
  262. .ui.primary.elastic.loading.loading.loading.loading > i.icon:before,
  263. .ui.primary.loading.loading.loading.loading:not(.usual):not(.button):after,
  264. .ui.primary.loading.loading.loading.loading .input > i.icon:after,
  265. .ui.primary.loading.loading.loading.loading > i.icon:after,
  266. .ui.primary.loader.loader.loader:after {
  267. color: #2185D0;
  268. }
  269. .ui.inverted.primary.elastic.loader:before,
  270. .ui.inverted.primary.elastic.loading.loading.loading:not(.segment):before,
  271. .ui.inverted.primary.elastic.loading.loading.loading .input > i.icon:before,
  272. .ui.inverted.primary.elastic.loading.loading.loading > i.icon:before,
  273. .ui.inverted.primary.loading.loading.loading.loading:not(.usual):after,
  274. .ui.inverted.primary.loading.loading.loading.loading .input > i.icon:after,
  275. .ui.inverted.primary.loading.loading.loading.loading > i.icon:after,
  276. .ui.inverted.primary.loader.loader.loader:after {
  277. color: #54C8FF;
  278. }
  279. .ui.secondary.elastic.loader.loader:before,
  280. .ui.secondary.basic.elastic.loading.button:before,
  281. .ui.secondary.basic.elastic.loading.button:after,
  282. .ui.secondary.elastic.loading.loading.loading:not(.segment):before,
  283. .ui.secondary.elastic.loading.loading.loading .input > i.icon:before,
  284. .ui.secondary.elastic.loading.loading.loading.loading > i.icon:before,
  285. .ui.secondary.loading.loading.loading.loading:not(.usual):not(.button):after,
  286. .ui.secondary.loading.loading.loading.loading .input > i.icon:after,
  287. .ui.secondary.loading.loading.loading.loading > i.icon:after,
  288. .ui.secondary.loader.loader.loader:after {
  289. color: #1B1C1D;
  290. }
  291. .ui.inverted.secondary.elastic.loader:before,
  292. .ui.inverted.secondary.elastic.loading.loading.loading:not(.segment):before,
  293. .ui.inverted.secondary.elastic.loading.loading.loading .input > i.icon:before,
  294. .ui.inverted.secondary.elastic.loading.loading.loading > i.icon:before,
  295. .ui.inverted.secondary.loading.loading.loading.loading:not(.usual):after,
  296. .ui.inverted.secondary.loading.loading.loading.loading .input > i.icon:after,
  297. .ui.inverted.secondary.loading.loading.loading.loading > i.icon:after,
  298. .ui.inverted.secondary.loader.loader.loader:after {
  299. color: #545454;
  300. }
  301. .ui.red.elastic.loader.loader:before,
  302. .ui.red.basic.elastic.loading.button:before,
  303. .ui.red.basic.elastic.loading.button:after,
  304. .ui.red.elastic.loading.loading.loading:not(.segment):before,
  305. .ui.red.elastic.loading.loading.loading .input > i.icon:before,
  306. .ui.red.elastic.loading.loading.loading.loading > i.icon:before,
  307. .ui.red.loading.loading.loading.loading:not(.usual):not(.button):after,
  308. .ui.red.loading.loading.loading.loading .input > i.icon:after,
  309. .ui.red.loading.loading.loading.loading > i.icon:after,
  310. .ui.red.loader.loader.loader:after {
  311. color: #DB2828;
  312. }
  313. .ui.inverted.red.elastic.loader:before,
  314. .ui.inverted.red.elastic.loading.loading.loading:not(.segment):before,
  315. .ui.inverted.red.elastic.loading.loading.loading .input > i.icon:before,
  316. .ui.inverted.red.elastic.loading.loading.loading > i.icon:before,
  317. .ui.inverted.red.loading.loading.loading.loading:not(.usual):after,
  318. .ui.inverted.red.loading.loading.loading.loading .input > i.icon:after,
  319. .ui.inverted.red.loading.loading.loading.loading > i.icon:after,
  320. .ui.inverted.red.loader.loader.loader:after {
  321. color: #FF695E;
  322. }
  323. .ui.orange.elastic.loader.loader:before,
  324. .ui.orange.basic.elastic.loading.button:before,
  325. .ui.orange.basic.elastic.loading.button:after,
  326. .ui.orange.elastic.loading.loading.loading:not(.segment):before,
  327. .ui.orange.elastic.loading.loading.loading .input > i.icon:before,
  328. .ui.orange.elastic.loading.loading.loading.loading > i.icon:before,
  329. .ui.orange.loading.loading.loading.loading:not(.usual):not(.button):after,
  330. .ui.orange.loading.loading.loading.loading .input > i.icon:after,
  331. .ui.orange.loading.loading.loading.loading > i.icon:after,
  332. .ui.orange.loader.loader.loader:after {
  333. color: #F2711C;
  334. }
  335. .ui.inverted.orange.elastic.loader:before,
  336. .ui.inverted.orange.elastic.loading.loading.loading:not(.segment):before,
  337. .ui.inverted.orange.elastic.loading.loading.loading .input > i.icon:before,
  338. .ui.inverted.orange.elastic.loading.loading.loading > i.icon:before,
  339. .ui.inverted.orange.loading.loading.loading.loading:not(.usual):after,
  340. .ui.inverted.orange.loading.loading.loading.loading .input > i.icon:after,
  341. .ui.inverted.orange.loading.loading.loading.loading > i.icon:after,
  342. .ui.inverted.orange.loader.loader.loader:after {
  343. color: #FF851B;
  344. }
  345. .ui.yellow.elastic.loader.loader:before,
  346. .ui.yellow.basic.elastic.loading.button:before,
  347. .ui.yellow.basic.elastic.loading.button:after,
  348. .ui.yellow.elastic.loading.loading.loading:not(.segment):before,
  349. .ui.yellow.elastic.loading.loading.loading .input > i.icon:before,
  350. .ui.yellow.elastic.loading.loading.loading.loading > i.icon:before,
  351. .ui.yellow.loading.loading.loading.loading:not(.usual):not(.button):after,
  352. .ui.yellow.loading.loading.loading.loading .input > i.icon:after,
  353. .ui.yellow.loading.loading.loading.loading > i.icon:after,
  354. .ui.yellow.loader.loader.loader:after {
  355. color: #FBBD08;
  356. }
  357. .ui.inverted.yellow.elastic.loader:before,
  358. .ui.inverted.yellow.elastic.loading.loading.loading:not(.segment):before,
  359. .ui.inverted.yellow.elastic.loading.loading.loading .input > i.icon:before,
  360. .ui.inverted.yellow.elastic.loading.loading.loading > i.icon:before,
  361. .ui.inverted.yellow.loading.loading.loading.loading:not(.usual):after,
  362. .ui.inverted.yellow.loading.loading.loading.loading .input > i.icon:after,
  363. .ui.inverted.yellow.loading.loading.loading.loading > i.icon:after,
  364. .ui.inverted.yellow.loader.loader.loader:after {
  365. color: #FFE21F;
  366. }
  367. .ui.olive.elastic.loader.loader:before,
  368. .ui.olive.basic.elastic.loading.button:before,
  369. .ui.olive.basic.elastic.loading.button:after,
  370. .ui.olive.elastic.loading.loading.loading:not(.segment):before,
  371. .ui.olive.elastic.loading.loading.loading .input > i.icon:before,
  372. .ui.olive.elastic.loading.loading.loading.loading > i.icon:before,
  373. .ui.olive.loading.loading.loading.loading:not(.usual):not(.button):after,
  374. .ui.olive.loading.loading.loading.loading .input > i.icon:after,
  375. .ui.olive.loading.loading.loading.loading > i.icon:after,
  376. .ui.olive.loader.loader.loader:after {
  377. color: #B5CC18;
  378. }
  379. .ui.inverted.olive.elastic.loader:before,
  380. .ui.inverted.olive.elastic.loading.loading.loading:not(.segment):before,
  381. .ui.inverted.olive.elastic.loading.loading.loading .input > i.icon:before,
  382. .ui.inverted.olive.elastic.loading.loading.loading > i.icon:before,
  383. .ui.inverted.olive.loading.loading.loading.loading:not(.usual):after,
  384. .ui.inverted.olive.loading.loading.loading.loading .input > i.icon:after,
  385. .ui.inverted.olive.loading.loading.loading.loading > i.icon:after,
  386. .ui.inverted.olive.loader.loader.loader:after {
  387. color: #D9E778;
  388. }
  389. .ui.green.elastic.loader.loader:before,
  390. .ui.green.basic.elastic.loading.button:before,
  391. .ui.green.basic.elastic.loading.button:after,
  392. .ui.green.elastic.loading.loading.loading:not(.segment):before,
  393. .ui.green.elastic.loading.loading.loading .input > i.icon:before,
  394. .ui.green.elastic.loading.loading.loading.loading > i.icon:before,
  395. .ui.green.loading.loading.loading.loading:not(.usual):not(.button):after,
  396. .ui.green.loading.loading.loading.loading .input > i.icon:after,
  397. .ui.green.loading.loading.loading.loading > i.icon:after,
  398. .ui.green.loader.loader.loader:after {
  399. color: #21BA45;
  400. }
  401. .ui.inverted.green.elastic.loader:before,
  402. .ui.inverted.green.elastic.loading.loading.loading:not(.segment):before,
  403. .ui.inverted.green.elastic.loading.loading.loading .input > i.icon:before,
  404. .ui.inverted.green.elastic.loading.loading.loading > i.icon:before,
  405. .ui.inverted.green.loading.loading.loading.loading:not(.usual):after,
  406. .ui.inverted.green.loading.loading.loading.loading .input > i.icon:after,
  407. .ui.inverted.green.loading.loading.loading.loading > i.icon:after,
  408. .ui.inverted.green.loader.loader.loader:after {
  409. color: #2ECC40;
  410. }
  411. .ui.teal.elastic.loader.loader:before,
  412. .ui.teal.basic.elastic.loading.button:before,
  413. .ui.teal.basic.elastic.loading.button:after,
  414. .ui.teal.elastic.loading.loading.loading:not(.segment):before,
  415. .ui.teal.elastic.loading.loading.loading .input > i.icon:before,
  416. .ui.teal.elastic.loading.loading.loading.loading > i.icon:before,
  417. .ui.teal.loading.loading.loading.loading:not(.usual):not(.button):after,
  418. .ui.teal.loading.loading.loading.loading .input > i.icon:after,
  419. .ui.teal.loading.loading.loading.loading > i.icon:after,
  420. .ui.teal.loader.loader.loader:after {
  421. color: #00B5AD;
  422. }
  423. .ui.inverted.teal.elastic.loader:before,
  424. .ui.inverted.teal.elastic.loading.loading.loading:not(.segment):before,
  425. .ui.inverted.teal.elastic.loading.loading.loading .input > i.icon:before,
  426. .ui.inverted.teal.elastic.loading.loading.loading > i.icon:before,
  427. .ui.inverted.teal.loading.loading.loading.loading:not(.usual):after,
  428. .ui.inverted.teal.loading.loading.loading.loading .input > i.icon:after,
  429. .ui.inverted.teal.loading.loading.loading.loading > i.icon:after,
  430. .ui.inverted.teal.loader.loader.loader:after {
  431. color: #6DFFFF;
  432. }
  433. .ui.blue.elastic.loader.loader:before,
  434. .ui.blue.basic.elastic.loading.button:before,
  435. .ui.blue.basic.elastic.loading.button:after,
  436. .ui.blue.elastic.loading.loading.loading:not(.segment):before,
  437. .ui.blue.elastic.loading.loading.loading .input > i.icon:before,
  438. .ui.blue.elastic.loading.loading.loading.loading > i.icon:before,
  439. .ui.blue.loading.loading.loading.loading:not(.usual):not(.button):after,
  440. .ui.blue.loading.loading.loading.loading .input > i.icon:after,
  441. .ui.blue.loading.loading.loading.loading > i.icon:after,
  442. .ui.blue.loader.loader.loader:after {
  443. color: #2185D0;
  444. }
  445. .ui.inverted.blue.elastic.loader:before,
  446. .ui.inverted.blue.elastic.loading.loading.loading:not(.segment):before,
  447. .ui.inverted.blue.elastic.loading.loading.loading .input > i.icon:before,
  448. .ui.inverted.blue.elastic.loading.loading.loading > i.icon:before,
  449. .ui.inverted.blue.loading.loading.loading.loading:not(.usual):after,
  450. .ui.inverted.blue.loading.loading.loading.loading .input > i.icon:after,
  451. .ui.inverted.blue.loading.loading.loading.loading > i.icon:after,
  452. .ui.inverted.blue.loader.loader.loader:after {
  453. color: #54C8FF;
  454. }
  455. .ui.violet.elastic.loader.loader:before,
  456. .ui.violet.basic.elastic.loading.button:before,
  457. .ui.violet.basic.elastic.loading.button:after,
  458. .ui.violet.elastic.loading.loading.loading:not(.segment):before,
  459. .ui.violet.elastic.loading.loading.loading .input > i.icon:before,
  460. .ui.violet.elastic.loading.loading.loading.loading > i.icon:before,
  461. .ui.violet.loading.loading.loading.loading:not(.usual):not(.button):after,
  462. .ui.violet.loading.loading.loading.loading .input > i.icon:after,
  463. .ui.violet.loading.loading.loading.loading > i.icon:after,
  464. .ui.violet.loader.loader.loader:after {
  465. color: #6435C9;
  466. }
  467. .ui.inverted.violet.elastic.loader:before,
  468. .ui.inverted.violet.elastic.loading.loading.loading:not(.segment):before,
  469. .ui.inverted.violet.elastic.loading.loading.loading .input > i.icon:before,
  470. .ui.inverted.violet.elastic.loading.loading.loading > i.icon:before,
  471. .ui.inverted.violet.loading.loading.loading.loading:not(.usual):after,
  472. .ui.inverted.violet.loading.loading.loading.loading .input > i.icon:after,
  473. .ui.inverted.violet.loading.loading.loading.loading > i.icon:after,
  474. .ui.inverted.violet.loader.loader.loader:after {
  475. color: #A291FB;
  476. }
  477. .ui.purple.elastic.loader.loader:before,
  478. .ui.purple.basic.elastic.loading.button:before,
  479. .ui.purple.basic.elastic.loading.button:after,
  480. .ui.purple.elastic.loading.loading.loading:not(.segment):before,
  481. .ui.purple.elastic.loading.loading.loading .input > i.icon:before,
  482. .ui.purple.elastic.loading.loading.loading.loading > i.icon:before,
  483. .ui.purple.loading.loading.loading.loading:not(.usual):not(.button):after,
  484. .ui.purple.loading.loading.loading.loading .input > i.icon:after,
  485. .ui.purple.loading.loading.loading.loading > i.icon:after,
  486. .ui.purple.loader.loader.loader:after {
  487. color: #A333C8;
  488. }
  489. .ui.inverted.purple.elastic.loader:before,
  490. .ui.inverted.purple.elastic.loading.loading.loading:not(.segment):before,
  491. .ui.inverted.purple.elastic.loading.loading.loading .input > i.icon:before,
  492. .ui.inverted.purple.elastic.loading.loading.loading > i.icon:before,
  493. .ui.inverted.purple.loading.loading.loading.loading:not(.usual):after,
  494. .ui.inverted.purple.loading.loading.loading.loading .input > i.icon:after,
  495. .ui.inverted.purple.loading.loading.loading.loading > i.icon:after,
  496. .ui.inverted.purple.loader.loader.loader:after {
  497. color: #DC73FF;
  498. }
  499. .ui.pink.elastic.loader.loader:before,
  500. .ui.pink.basic.elastic.loading.button:before,
  501. .ui.pink.basic.elastic.loading.button:after,
  502. .ui.pink.elastic.loading.loading.loading:not(.segment):before,
  503. .ui.pink.elastic.loading.loading.loading .input > i.icon:before,
  504. .ui.pink.elastic.loading.loading.loading.loading > i.icon:before,
  505. .ui.pink.loading.loading.loading.loading:not(.usual):not(.button):after,
  506. .ui.pink.loading.loading.loading.loading .input > i.icon:after,
  507. .ui.pink.loading.loading.loading.loading > i.icon:after,
  508. .ui.pink.loader.loader.loader:after {
  509. color: #E03997;
  510. }
  511. .ui.inverted.pink.elastic.loader:before,
  512. .ui.inverted.pink.elastic.loading.loading.loading:not(.segment):before,
  513. .ui.inverted.pink.elastic.loading.loading.loading .input > i.icon:before,
  514. .ui.inverted.pink.elastic.loading.loading.loading > i.icon:before,
  515. .ui.inverted.pink.loading.loading.loading.loading:not(.usual):after,
  516. .ui.inverted.pink.loading.loading.loading.loading .input > i.icon:after,
  517. .ui.inverted.pink.loading.loading.loading.loading > i.icon:after,
  518. .ui.inverted.pink.loader.loader.loader:after {
  519. color: #FF8EDF;
  520. }
  521. .ui.brown.elastic.loader.loader:before,
  522. .ui.brown.basic.elastic.loading.button:before,
  523. .ui.brown.basic.elastic.loading.button:after,
  524. .ui.brown.elastic.loading.loading.loading:not(.segment):before,
  525. .ui.brown.elastic.loading.loading.loading .input > i.icon:before,
  526. .ui.brown.elastic.loading.loading.loading.loading > i.icon:before,
  527. .ui.brown.loading.loading.loading.loading:not(.usual):not(.button):after,
  528. .ui.brown.loading.loading.loading.loading .input > i.icon:after,
  529. .ui.brown.loading.loading.loading.loading > i.icon:after,
  530. .ui.brown.loader.loader.loader:after {
  531. color: #A5673F;
  532. }
  533. .ui.inverted.brown.elastic.loader:before,
  534. .ui.inverted.brown.elastic.loading.loading.loading:not(.segment):before,
  535. .ui.inverted.brown.elastic.loading.loading.loading .input > i.icon:before,
  536. .ui.inverted.brown.elastic.loading.loading.loading > i.icon:before,
  537. .ui.inverted.brown.loading.loading.loading.loading:not(.usual):after,
  538. .ui.inverted.brown.loading.loading.loading.loading .input > i.icon:after,
  539. .ui.inverted.brown.loading.loading.loading.loading > i.icon:after,
  540. .ui.inverted.brown.loader.loader.loader:after {
  541. color: #D67C1C;
  542. }
  543. .ui.grey.elastic.loader.loader:before,
  544. .ui.grey.basic.elastic.loading.button:before,
  545. .ui.grey.basic.elastic.loading.button:after,
  546. .ui.grey.elastic.loading.loading.loading:not(.segment):before,
  547. .ui.grey.elastic.loading.loading.loading .input > i.icon:before,
  548. .ui.grey.elastic.loading.loading.loading.loading > i.icon:before,
  549. .ui.grey.loading.loading.loading.loading:not(.usual):not(.button):after,
  550. .ui.grey.loading.loading.loading.loading .input > i.icon:after,
  551. .ui.grey.loading.loading.loading.loading > i.icon:after,
  552. .ui.grey.loader.loader.loader:after {
  553. color: #767676;
  554. }
  555. .ui.inverted.grey.elastic.loader:before,
  556. .ui.inverted.grey.elastic.loading.loading.loading:not(.segment):before,
  557. .ui.inverted.grey.elastic.loading.loading.loading .input > i.icon:before,
  558. .ui.inverted.grey.elastic.loading.loading.loading > i.icon:before,
  559. .ui.inverted.grey.loading.loading.loading.loading:not(.usual):after,
  560. .ui.inverted.grey.loading.loading.loading.loading .input > i.icon:after,
  561. .ui.inverted.grey.loading.loading.loading.loading > i.icon:after,
  562. .ui.inverted.grey.loader.loader.loader:after {
  563. color: #DCDDDE;
  564. }
  565. .ui.black.elastic.loader.loader:before,
  566. .ui.black.basic.elastic.loading.button:before,
  567. .ui.black.basic.elastic.loading.button:after,
  568. .ui.black.elastic.loading.loading.loading:not(.segment):before,
  569. .ui.black.elastic.loading.loading.loading .input > i.icon:before,
  570. .ui.black.elastic.loading.loading.loading.loading > i.icon:before,
  571. .ui.black.loading.loading.loading.loading:not(.usual):not(.button):after,
  572. .ui.black.loading.loading.loading.loading .input > i.icon:after,
  573. .ui.black.loading.loading.loading.loading > i.icon:after,
  574. .ui.black.loader.loader.loader:after {
  575. color: #1B1C1D;
  576. }
  577. .ui.inverted.black.elastic.loader:before,
  578. .ui.inverted.black.elastic.loading.loading.loading:not(.segment):before,
  579. .ui.inverted.black.elastic.loading.loading.loading .input > i.icon:before,
  580. .ui.inverted.black.elastic.loading.loading.loading > i.icon:before,
  581. .ui.inverted.black.loading.loading.loading.loading:not(.usual):after,
  582. .ui.inverted.black.loading.loading.loading.loading .input > i.icon:after,
  583. .ui.inverted.black.loading.loading.loading.loading > i.icon:after,
  584. .ui.inverted.black.loader.loader.loader:after {
  585. color: #545454;
  586. }
  587. .ui.elastic.loader.loader:before,
  588. .ui.elastic.loading.loading.loading:before,
  589. .ui.elastic.loading.loading.loading .input > i.icon:before,
  590. .ui.elastic.loading.loading.loading > i.icon:before,
  591. .ui.loading.loading.loading.loading:not(.usual):after,
  592. .ui.loading.loading.loading.loading .input > i.icon:after,
  593. .ui.loading.loading.loading.loading > i.icon:after,
  594. .ui.loader.loader.loader:after {
  595. border-color: currentColor;
  596. }
  597. .ui.elastic.loading.loading.loading.loading.button:not(.inverted):not(.basic):before {
  598. color: #FFFFFF;
  599. }
  600. .ui.elastic.basic.loading.button:before,
  601. .ui.elastic.basic.loading.button:after {
  602. color: #767676;
  603. }
  604. .ui.double.loading.loading.loading.loading.button:after {
  605. border-bottom-color: currentColor;
  606. }
  607. /*-------------------
  608. Inline
  609. --------------------*/
  610. .ui.inline.loader {
  611. position: relative;
  612. vertical-align: middle;
  613. margin: 0;
  614. left: 0;
  615. top: 0;
  616. -webkit-transform: none;
  617. transform: none;
  618. }
  619. .ui.inline.loader.active,
  620. .ui.inline.loader.visible {
  621. display: inline-block;
  622. }
  623. /* Centered Inline */
  624. .ui.centered.inline.loader.active,
  625. .ui.centered.inline.loader.visible {
  626. display: block;
  627. margin-left: auto;
  628. margin-right: auto;
  629. }
  630. .ui.loading.loading.loading.loading.loading.loading:after,
  631. .ui.loading.loading.loading.loading.loading.loading .input > i.icon:after,
  632. .ui.loading.loading.loading.loading.loading.loading > i.icon:after,
  633. .ui.loader.loader.loader.loader.loader:after {
  634. border-left-color: transparent;
  635. border-right-color: transparent;
  636. }
  637. .ui.loading.loading.loading.loading.loading.loading.loading:not(.double):after,
  638. .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) .input > i.icon:after,
  639. .ui.loading.loading.loading.loading.loading.loading.loading:not(.double) > i.icon:after,
  640. .ui.loader.loader.loader.loader.loader.loader:not(.double):after {
  641. border-bottom-color: transparent;
  642. }
  643. .ui.loading.loading.loading.loading.loading.loading.segment:after,
  644. .ui.loading.loading.loading.loading.loading.loading.form:after {
  645. border-left-color: rgba(0, 0, 0, 0.1);
  646. border-right-color: rgba(0, 0, 0, 0.1);
  647. }
  648. .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after,
  649. .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after {
  650. border-bottom-color: rgba(0, 0, 0, 0.1);
  651. }
  652. /*-------------------
  653. Elastic
  654. --------------------*/
  655. .ui.dimmer > .ui.elastic.loader {
  656. color: #FFFFFF;
  657. }
  658. .ui.inverted.dimmer > .ui.elastic.loader {
  659. color: #767676;
  660. }
  661. .ui.elastic.loading.loading:not(.form):not(.segment):after,
  662. .ui.elastic.loading.loading .input > i.icon:after,
  663. .ui.elastic.loading.loading > i.icon:after,
  664. .ui.elastic.loader.loader:after {
  665. -webkit-animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
  666. animation: loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
  667. -webkit-animation-delay: 0.3s;
  668. animation-delay: 0.3s;
  669. }
  670. .ui.elastic.loading.loading.loading:not(.form):not(.segment):before,
  671. .ui.elastic.loading.loading.loading .input > i.icon:before,
  672. .ui.elastic.loading.loading.loading > i.icon:before,
  673. .ui.elastic.loader.loader:before {
  674. -webkit-animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
  675. animation: elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
  676. -moz-animation: currentcolor-elastic-loader 1s infinite cubic-bezier(0.27, 1.05, 0.92, 0.61);
  677. border-right-color: transparent;
  678. }
  679. .ui.elastic.inline.loader:empty {
  680. -webkit-animation: loader 8s infinite linear;
  681. animation: loader 8s infinite linear;
  682. }
  683. .ui.slow.elastic.loading.loading:not(.form):not(.segment):after,
  684. .ui.slow.elastic.loading.loading .input > i.icon:after,
  685. .ui.slow.elastic.loading.loading > i.icon:after,
  686. .ui.slow.elastic.loader.loader:after {
  687. -webkit-animation-duration: 1.5s;
  688. animation-duration: 1.5s;
  689. -webkit-animation-delay: 0.45s;
  690. animation-delay: 0.45s;
  691. }
  692. .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before,
  693. .ui.slow.elastic.loading.loading.loading .input > i.icon:before,
  694. .ui.slow.elastic.loading.loading.loading > i.icon:before,
  695. .ui.slow.elastic.loader.loader:before {
  696. -webkit-animation-duration: 1.5s;
  697. animation-duration: 1.5s;
  698. }
  699. .ui.fast.elastic.loading.loading:not(.form):not(.segment):after,
  700. .ui.fast.elastic.loading.loading .input > i.icon:after,
  701. .ui.fast.elastic.loading.loading > i.icon:after,
  702. .ui.fast.elastic.loader.loader:after {
  703. -webkit-animation-duration: 0.66s;
  704. animation-duration: 0.66s;
  705. -webkit-animation-delay: 0.2s;
  706. animation-delay: 0.2s;
  707. }
  708. .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before,
  709. .ui.fast.elastic.loading.loading.loading .input > i.icon:before,
  710. .ui.fast.elastic.loading.loading.loading > i.icon:before,
  711. .ui.fast.elastic.loader.loader:before {
  712. -webkit-animation-duration: 0.66s;
  713. animation-duration: 0.66s;
  714. }
  715. @-webkit-keyframes elastic-loader {
  716. 0%,
  717. 1% {
  718. border-left-color: transparent;
  719. border-bottom-color: transparent;
  720. }
  721. 1.1%,
  722. 50% {
  723. border-left-color: inherit;
  724. }
  725. 10%,
  726. 35.1% {
  727. border-bottom-color: transparent;
  728. }
  729. 10.1%,
  730. 35% {
  731. border-bottom-color: inherit;
  732. }
  733. 50.1% {
  734. border-left-color: transparent;
  735. }
  736. 100% {
  737. border-left-color: transparent;
  738. border-bottom-color: transparent;
  739. -webkit-transform: rotate(360deg);
  740. transform: rotate(360deg);
  741. }
  742. }
  743. @keyframes elastic-loader {
  744. 0%,
  745. 1% {
  746. border-left-color: transparent;
  747. border-bottom-color: transparent;
  748. }
  749. 1.1%,
  750. 50% {
  751. border-left-color: inherit;
  752. }
  753. 10%,
  754. 35.1% {
  755. border-bottom-color: transparent;
  756. }
  757. 10.1%,
  758. 35% {
  759. border-bottom-color: inherit;
  760. }
  761. 50.1% {
  762. border-left-color: transparent;
  763. }
  764. 100% {
  765. border-left-color: transparent;
  766. border-bottom-color: transparent;
  767. -webkit-transform: rotate(360deg);
  768. transform: rotate(360deg);
  769. }
  770. }
  771. @-webkit-keyframes currentcolor-elastic-loader {
  772. 0%,
  773. 1% {
  774. border-left-color: transparent;
  775. border-bottom-color: transparent;
  776. }
  777. 1.1%,
  778. 50% {
  779. border-left-color: currentColor;
  780. }
  781. 10%,
  782. 35.1% {
  783. border-bottom-color: transparent;
  784. }
  785. 10.1%,
  786. 35% {
  787. border-bottom-color: currentColor;
  788. }
  789. 50.1% {
  790. border-left-color: transparent;
  791. }
  792. 100% {
  793. border-left-color: transparent;
  794. border-bottom-color: transparent;
  795. -webkit-transform: rotate(360deg);
  796. transform: rotate(360deg);
  797. }
  798. }
  799. @keyframes currentcolor-elastic-loader {
  800. 0%,
  801. 1% {
  802. border-left-color: transparent;
  803. border-bottom-color: transparent;
  804. }
  805. 1.1%,
  806. 50% {
  807. border-left-color: currentColor;
  808. }
  809. 10%,
  810. 35.1% {
  811. border-bottom-color: transparent;
  812. }
  813. 10.1%,
  814. 35% {
  815. border-bottom-color: currentColor;
  816. }
  817. 50.1% {
  818. border-left-color: transparent;
  819. }
  820. 100% {
  821. border-left-color: transparent;
  822. border-bottom-color: transparent;
  823. -webkit-transform: rotate(360deg);
  824. transform: rotate(360deg);
  825. }
  826. }
  827. /*******************************
  828. Theme Overrides
  829. *******************************/
  830. /*******************************
  831. Site Overrides
  832. *******************************/