1
0

loader.css 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /*!
  2. * # Semantic UI 2.3.3 - Loader
  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. Loader
  12. *******************************/
  13. /* Standard Size */
  14. .ui.loader {
  15. display: none;
  16. position: absolute;
  17. top: 50%;
  18. left: 50%;
  19. margin: 0px;
  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 linear;
  45. animation: loader 0.6s linear;
  46. -webkit-animation-iteration-count: infinite;
  47. animation-iteration-count: infinite;
  48. border-radius: 500rem;
  49. border-color: #767676 transparent transparent;
  50. border-style: solid;
  51. border-width: 0.2em;
  52. -webkit-box-shadow: 0px 0px 0px 1px transparent;
  53. box-shadow: 0px 0px 0px 1px transparent;
  54. }
  55. /* Active Animation */
  56. @-webkit-keyframes loader {
  57. from {
  58. -webkit-transform: rotate(0deg);
  59. transform: rotate(0deg);
  60. }
  61. to {
  62. -webkit-transform: rotate(360deg);
  63. transform: rotate(360deg);
  64. }
  65. }
  66. @keyframes loader {
  67. from {
  68. -webkit-transform: rotate(0deg);
  69. transform: rotate(0deg);
  70. }
  71. to {
  72. -webkit-transform: rotate(360deg);
  73. transform: rotate(360deg);
  74. }
  75. }
  76. /* Sizes */
  77. .ui.mini.loader:before,
  78. .ui.mini.loader:after {
  79. width: 1rem;
  80. height: 1rem;
  81. margin: 0em 0em 0em -0.5rem;
  82. }
  83. .ui.tiny.loader:before,
  84. .ui.tiny.loader:after {
  85. width: 1.14285714rem;
  86. height: 1.14285714rem;
  87. margin: 0em 0em 0em -0.57142857rem;
  88. }
  89. .ui.small.loader:before,
  90. .ui.small.loader:after {
  91. width: 1.71428571rem;
  92. height: 1.71428571rem;
  93. margin: 0em 0em 0em -0.85714286rem;
  94. }
  95. .ui.loader:before,
  96. .ui.loader:after {
  97. width: 2.28571429rem;
  98. height: 2.28571429rem;
  99. margin: 0em 0em 0em -1.14285714rem;
  100. }
  101. .ui.large.loader:before,
  102. .ui.large.loader:after {
  103. width: 3.42857143rem;
  104. height: 3.42857143rem;
  105. margin: 0em 0em 0em -1.71428571rem;
  106. }
  107. .ui.big.loader:before,
  108. .ui.big.loader:after {
  109. width: 3.71428571rem;
  110. height: 3.71428571rem;
  111. margin: 0em 0em 0em -1.85714286rem;
  112. }
  113. .ui.huge.loader:before,
  114. .ui.huge.loader:after {
  115. width: 4.14285714rem;
  116. height: 4.14285714rem;
  117. margin: 0em 0em 0em -2.07142857rem;
  118. }
  119. .ui.massive.loader:before,
  120. .ui.massive.loader:after {
  121. width: 4.57142857rem;
  122. height: 4.57142857rem;
  123. margin: 0em 0em 0em -2.28571429rem;
  124. }
  125. /*-------------------
  126. Coupling
  127. --------------------*/
  128. /* Show inside active dimmer */
  129. .ui.dimmer .loader {
  130. display: block;
  131. }
  132. /* Black Dimmer */
  133. .ui.dimmer .ui.loader {
  134. color: rgba(255, 255, 255, 0.9);
  135. }
  136. .ui.dimmer .ui.loader:before {
  137. border-color: rgba(255, 255, 255, 0.15);
  138. }
  139. .ui.dimmer .ui.loader:after {
  140. border-color: #FFFFFF transparent transparent;
  141. }
  142. /* White Dimmer (Inverted) */
  143. .ui.inverted.dimmer .ui.loader {
  144. color: rgba(0, 0, 0, 0.87);
  145. }
  146. .ui.inverted.dimmer .ui.loader:before {
  147. border-color: rgba(0, 0, 0, 0.1);
  148. }
  149. .ui.inverted.dimmer .ui.loader:after {
  150. border-color: #767676 transparent transparent;
  151. }
  152. /*******************************
  153. Types
  154. *******************************/
  155. /*-------------------
  156. Text
  157. --------------------*/
  158. .ui.text.loader {
  159. width: auto !important;
  160. height: auto !important;
  161. text-align: center;
  162. font-style: normal;
  163. }
  164. /*******************************
  165. States
  166. *******************************/
  167. .ui.indeterminate.loader:after {
  168. animation-direction: reverse;
  169. -webkit-animation-duration: 1.2s;
  170. animation-duration: 1.2s;
  171. }
  172. .ui.loader.active,
  173. .ui.loader.visible {
  174. display: block;
  175. }
  176. .ui.loader.disabled,
  177. .ui.loader.hidden {
  178. display: none;
  179. }
  180. /*******************************
  181. Variations
  182. *******************************/
  183. /*-------------------
  184. Sizes
  185. --------------------*/
  186. /* Loader */
  187. .ui.inverted.dimmer .ui.mini.loader,
  188. .ui.mini.loader {
  189. width: 1rem;
  190. height: 1rem;
  191. font-size: 0.78571429em;
  192. }
  193. .ui.inverted.dimmer .ui.tiny.loader,
  194. .ui.tiny.loader {
  195. width: 1.14285714rem;
  196. height: 1.14285714rem;
  197. font-size: 0.85714286em;
  198. }
  199. .ui.inverted.dimmer .ui.small.loader,
  200. .ui.small.loader {
  201. width: 1.71428571rem;
  202. height: 1.71428571rem;
  203. font-size: 0.92857143em;
  204. }
  205. .ui.inverted.dimmer .ui.loader,
  206. .ui.loader {
  207. width: 2.28571429rem;
  208. height: 2.28571429rem;
  209. font-size: 1em;
  210. }
  211. .ui.inverted.dimmer .ui.large.loader,
  212. .ui.large.loader {
  213. width: 3.42857143rem;
  214. height: 3.42857143rem;
  215. font-size: 1.14285714em;
  216. }
  217. .ui.inverted.dimmer .ui.big.loader,
  218. .ui.big.loader {
  219. width: 3.71428571rem;
  220. height: 3.71428571rem;
  221. font-size: 1.28571429em;
  222. }
  223. .ui.inverted.dimmer .ui.huge.loader,
  224. .ui.huge.loader {
  225. width: 4.14285714rem;
  226. height: 4.14285714rem;
  227. font-size: 1.42857143em;
  228. }
  229. .ui.inverted.dimmer .ui.massive.loader,
  230. .ui.massive.loader {
  231. width: 4.57142857rem;
  232. height: 4.57142857rem;
  233. font-size: 1.71428571em;
  234. }
  235. /* Text Loader */
  236. .ui.mini.text.loader {
  237. min-width: 1rem;
  238. padding-top: 1.78571429rem;
  239. }
  240. .ui.tiny.text.loader {
  241. min-width: 1.14285714rem;
  242. padding-top: 1.92857143rem;
  243. }
  244. .ui.small.text.loader {
  245. min-width: 1.71428571rem;
  246. padding-top: 2.5rem;
  247. }
  248. .ui.text.loader {
  249. min-width: 2.28571429rem;
  250. padding-top: 3.07142857rem;
  251. }
  252. .ui.large.text.loader {
  253. min-width: 3.42857143rem;
  254. padding-top: 4.21428571rem;
  255. }
  256. .ui.big.text.loader {
  257. min-width: 3.71428571rem;
  258. padding-top: 4.5rem;
  259. }
  260. .ui.huge.text.loader {
  261. min-width: 4.14285714rem;
  262. padding-top: 4.92857143rem;
  263. }
  264. .ui.massive.text.loader {
  265. min-width: 4.57142857rem;
  266. padding-top: 5.35714286rem;
  267. }
  268. /*-------------------
  269. Inverted
  270. --------------------*/
  271. .ui.inverted.loader {
  272. color: rgba(255, 255, 255, 0.9);
  273. }
  274. .ui.inverted.loader:before {
  275. border-color: rgba(255, 255, 255, 0.15);
  276. }
  277. .ui.inverted.loader:after {
  278. border-top-color: #FFFFFF;
  279. }
  280. /*-------------------
  281. Inline
  282. --------------------*/
  283. .ui.inline.loader {
  284. position: relative;
  285. vertical-align: middle;
  286. margin: 0em;
  287. left: 0em;
  288. top: 0em;
  289. -webkit-transform: none;
  290. transform: none;
  291. }
  292. .ui.inline.loader.active,
  293. .ui.inline.loader.visible {
  294. display: inline-block;
  295. }
  296. /* Centered Inline */
  297. .ui.centered.inline.loader.active,
  298. .ui.centered.inline.loader.visible {
  299. display: block;
  300. margin-left: auto;
  301. margin-right: auto;
  302. }
  303. /*******************************
  304. Theme Overrides
  305. *******************************/
  306. /*******************************
  307. Site Overrides
  308. *******************************/