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.

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