You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

286 lines
5.3 KiB

9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
9 years ago
9 years ago
10 years ago
  1. /*!
  2. * # Semantic UI 2.0.0 - Loader
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2014 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Loader
  13. *******************************/
  14. /* Standard Size */
  15. .ui.loader {
  16. display: none;
  17. position: absolute;
  18. top: 50%;
  19. left: 50%;
  20. margin: 0px;
  21. text-align: center;
  22. z-index: 1000;
  23. -webkit-transform: translateX(-50%) translateY(-50%);
  24. -ms-transform: translateX(-50%) translateY(-50%);
  25. transform: translateX(-50%) translateY(-50%);
  26. }
  27. /* Static Shape */
  28. .ui.loader:before {
  29. position: absolute;
  30. content: '';
  31. top: 0%;
  32. left: 50%;
  33. width: 100%;
  34. height: 100%;
  35. border-radius: 500rem;
  36. border: 0.2em solid rgba(0, 0, 0, 0.1);
  37. }
  38. /* Active Shape */
  39. .ui.loader:after {
  40. position: absolute;
  41. content: '';
  42. top: 0%;
  43. left: 50%;
  44. width: 100%;
  45. height: 100%;
  46. -webkit-animation: loader 0.6s linear;
  47. animation: loader 0.6s linear;
  48. -webkit-animation-iteration-count: infinite;
  49. animation-iteration-count: infinite;
  50. border-radius: 500rem;
  51. border-color: #aaaaaa transparent transparent;
  52. border-style: solid;
  53. border-width: 0.2em;
  54. box-shadow: 0px 0px 0px 1px transparent;
  55. }
  56. /* Active Animation */
  57. @-webkit-keyframes loader {
  58. from {
  59. -webkit-transform: rotate(0deg);
  60. transform: rotate(0deg);
  61. }
  62. to {
  63. -webkit-transform: rotate(360deg);
  64. transform: rotate(360deg);
  65. }
  66. }
  67. @keyframes loader {
  68. from {
  69. -webkit-transform: rotate(0deg);
  70. transform: rotate(0deg);
  71. }
  72. to {
  73. -webkit-transform: rotate(360deg);
  74. transform: rotate(360deg);
  75. }
  76. }
  77. /* Sizes */
  78. .ui.loader:before,
  79. .ui.loader:after {
  80. width: 2.2585em;
  81. height: 2.2585em;
  82. margin: 0em 0em 0em -1.12925em;
  83. }
  84. .ui.mini.loader:before,
  85. .ui.mini.loader:after {
  86. width: 1.2857em;
  87. height: 1.2857em;
  88. margin: 0em 0em 0em -0.64285em;
  89. }
  90. .ui.small.loader:before,
  91. .ui.small.loader:after {
  92. width: 1.7142em;
  93. height: 1.7142em;
  94. margin: 0em 0em 0em -0.8571em;
  95. }
  96. .ui.large.loader:before,
  97. .ui.large.loader:after {
  98. width: 4.5714em;
  99. height: 4.5714em;
  100. margin: 0em 0em 0em -2.2857em;
  101. }
  102. /*-------------------
  103. Coupling
  104. --------------------*/
  105. /* Show inside active dimmer */
  106. .ui.dimmer .loader {
  107. display: block;
  108. }
  109. /* Black Dimmer */
  110. .ui.dimmer .ui.loader {
  111. color: rgba(255, 255, 255, 0.9);
  112. }
  113. .ui.dimmer .ui.loader:before {
  114. border-color: rgba(255, 255, 255, 0.15);
  115. }
  116. .ui.dimmer .ui.loader:after {
  117. border-color: #ffffff transparent transparent;
  118. }
  119. /* White Dimmer (Inverted) */
  120. .ui.inverted.dimmer .ui.loader {
  121. color: rgba(0, 0, 0, 0.8);
  122. }
  123. .ui.inverted.dimmer .ui.loader:before {
  124. border-color: rgba(0, 0, 0, 0.1);
  125. }
  126. .ui.inverted.dimmer .ui.loader:after {
  127. border-color: #aaaaaa transparent transparent;
  128. }
  129. /*******************************
  130. Types
  131. *******************************/
  132. /*-------------------
  133. Text
  134. --------------------*/
  135. .ui.text.loader {
  136. width: auto !important;
  137. height: auto !important;
  138. text-align: center;
  139. font-style: normal;
  140. }
  141. /*******************************
  142. States
  143. *******************************/
  144. .ui.indeterminate.loader:after {
  145. -webkit-animation-direction: reverse;
  146. animation-direction: reverse;
  147. -webkit-animation-duration: 1.2s;
  148. animation-duration: 1.2s;
  149. }
  150. .ui.loader.active,
  151. .ui.loader.visible {
  152. display: block;
  153. }
  154. .ui.loader.disabled,
  155. .ui.loader.hidden {
  156. display: none;
  157. }
  158. /*******************************
  159. Variations
  160. *******************************/
  161. /*-------------------
  162. Sizes
  163. --------------------*/
  164. /* Loader */
  165. .ui.inverted.dimmer .ui.mini.loader,
  166. .ui.mini.loader {
  167. width: 1.2857em;
  168. height: 1.2857em;
  169. font-size: 0.7857em;
  170. }
  171. .ui.inverted.dimmer .ui.small.loader,
  172. .ui.small.loader {
  173. width: 1.7142em;
  174. height: 1.7142em;
  175. font-size: 0.9285em;
  176. }
  177. .ui.inverted.dimmer .ui.loader,
  178. .ui.loader {
  179. width: 2.2585em;
  180. height: 2.2585em;
  181. font-size: 1em;
  182. }
  183. .ui.inverted.dimmer .ui.loader.large,
  184. .ui.loader.large {
  185. width: 4.5714em;
  186. height: 4.5714em;
  187. font-size: 1.1428em;
  188. }
  189. /* Text Loader */
  190. .ui.mini.text.loader {
  191. min-width: 1.2857em;
  192. padding-top: 1.9857em;
  193. }
  194. .ui.small.text.loader {
  195. min-width: 1.7142em;
  196. padding-top: 2.4142em;
  197. }
  198. .ui.text.loader {
  199. min-width: 2.2585em;
  200. padding-top: 2.9585em;
  201. }
  202. .ui.large.text.loader {
  203. min-width: 4.5714em;
  204. padding-top: 5.2714em;
  205. }
  206. /*-------------------
  207. Inverted
  208. --------------------*/
  209. .ui.inverted.loader {
  210. color: rgba(255, 255, 255, 0.9);
  211. }
  212. .ui.inverted.loader:before {
  213. border-color: rgba(255, 255, 255, 0.15);
  214. }
  215. .ui.inverted.loader:after {
  216. border-top-color: #ffffff;
  217. }
  218. /*-------------------
  219. Inline
  220. --------------------*/
  221. .ui.inline.loader {
  222. position: relative;
  223. vertical-align: middle;
  224. margin: 0em;
  225. left: 0em;
  226. top: 0em;
  227. -webkit-transform: none;
  228. -ms-transform: none;
  229. transform: none;
  230. }
  231. .ui.inline.loader.active,
  232. .ui.inline.loader.visible {
  233. display: inline-block;
  234. }
  235. /* Centered Inline */
  236. .ui.centered.inline.loader.active,
  237. .ui.centered.inline.loader.visible {
  238. display: block;
  239. margin-left: auto;
  240. margin-right: auto;
  241. }
  242. /*******************************
  243. Theme Overrides
  244. *******************************/
  245. /*******************************
  246. Site Overrides
  247. *******************************/