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.

154 lines
3.3 KiB

  1. /*
  2. * # Semantic - Loader
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 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. z-index: 1000;
  22. -webkit-transform: translateX(-50%) translateY(-50%);
  23. -moz-transform: translateX(-50%) translateY(-50%);
  24. -o-transform: translateX(-50%) translateY(-50%);
  25. -ms-transform: translateX(-50%) translateY(-50%);
  26. transform: translateX(-50%) translateY(-50%);
  27. }
  28. .ui.dimmer .loader {
  29. display: block;
  30. }
  31. /*******************************
  32. Types
  33. *******************************/
  34. /*-------------------
  35. Text
  36. --------------------*/
  37. .ui.text.loader {
  38. width: auto !important;
  39. height: auto !important;
  40. text-align: center;
  41. font-style: normal;
  42. }
  43. .ui.mini.text.loader {
  44. min-width: 16px;
  45. padding-top: 2em;
  46. font-size: 0.875em;
  47. }
  48. .ui.small.text.loader {
  49. min-width: 24px;
  50. padding-top: 2.5em;
  51. font-size: 0.875em;
  52. }
  53. .ui.text.loader {
  54. min-width: 32px;
  55. font-size: 1em;
  56. padding-top: 3em;
  57. }
  58. .ui.large.text.loader {
  59. min-width: 64px;
  60. padding-top: 5em;
  61. font-size: 1.2em;
  62. }
  63. /*******************************
  64. States
  65. *******************************/
  66. .ui.loader.active,
  67. .ui.loader.visible {
  68. display: block;
  69. }
  70. .ui.loader.disabled,
  71. .ui.loader.hidden {
  72. display: none;
  73. }
  74. /*******************************
  75. Variations
  76. *******************************/
  77. /*-------------------
  78. Inverted
  79. --------------------*/
  80. .ui.dimmer .ui.text.loader,
  81. .ui.inverted.text.loader {
  82. color: rgba(255, 255, 255, 0.8);
  83. }
  84. .ui.inverted.dimmer .ui.text.loader {
  85. color: rgba(0, 0, 0, 0.8);
  86. }
  87. /* Tiny Size */
  88. .ui.dimmer .mini.ui.loader,
  89. .ui.inverted .mini.ui.loader {
  90. background-image: url(../images/loader-mini-inverted.gif);
  91. }
  92. /* Small Size */
  93. .ui.dimmer .small.ui.loader,
  94. .ui.inverted .small.ui.loader {
  95. background-image: url(../images/loader-small-inverted.gif);
  96. }
  97. /* Standard Size */
  98. .ui.dimmer .ui.loader,
  99. .ui.inverted.loader {
  100. background-image: url(../images/loader-medium-inverted.gif);
  101. }
  102. /* Large Size */
  103. .ui.dimmer .large.ui.loader,
  104. .ui.inverted .large.ui.loader {
  105. background-image: url(../images/loader-large-inverted.gif);
  106. }
  107. /*-------------------
  108. Sizes
  109. --------------------*/
  110. /* Tiny Size */
  111. .ui.inverted.dimmer .ui.mini.loader,
  112. .ui.mini.loader {
  113. width: 16px;
  114. height: 16px;
  115. background-image: url(../images/loader-mini.gif);
  116. }
  117. /* Small Size */
  118. .ui.inverted.dimmer .ui.small.loader,
  119. .ui.small.loader {
  120. width: 24px;
  121. height: 24px;
  122. background-image: url(../images/loader-small.gif);
  123. }
  124. .ui.inverted.dimmer .ui.loader,
  125. .ui.loader {
  126. width: 32px;
  127. height: 32px;
  128. background: url(../images/loader-medium.gif) no-repeat;
  129. background-position: 48% 0px;
  130. }
  131. /* Large Size */
  132. .ui.inverted.dimmer .ui.loader.large,
  133. .ui.loader.large {
  134. width: 64px;
  135. height: 64px;
  136. background-image: url(../images/loader-large.gif);
  137. }
  138. /*-------------------
  139. Inline
  140. --------------------*/
  141. .ui.inline.loader {
  142. position: static;
  143. vertical-align: middle;
  144. margin: 0em;
  145. -webkit-transform: none;
  146. -moz-transform: none;
  147. -o-transform: none;
  148. -ms-transform: none;
  149. transform: none;
  150. }
  151. .ui.inline.loader.active,
  152. .ui.inline.loader.visible {
  153. display: inline-block;
  154. }