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.

148 lines
3.1 KiB

  1. /*
  2. * # Semantic Loader
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Loader
  14. *******************************/
  15. /* Standard Size */
  16. .ui.loader {
  17. display: none;
  18. position: absolute;
  19. top: 50%;
  20. left: 50%;
  21. margin: -16px 0px 0px -16px;
  22. z-index: 1000;
  23. }
  24. .ui.dimmer .loader {
  25. display: block;
  26. }
  27. /*-------------------
  28. Text
  29. --------------------*/
  30. /* Text Styles */
  31. .ui.loader.text {
  32. width: auto !important;
  33. height: auto !important;
  34. text-align: center;
  35. font-style: normal;
  36. margin-top: -28px;
  37. min-width: 32px;
  38. padding-top: 40px;
  39. font-size: 0.875em;
  40. }
  41. .ui.loader.text.mini {
  42. margin-top: -16px;
  43. min-width: 16px;
  44. padding-top: 20px;
  45. font-size: 0.875em;
  46. }
  47. .ui.loader.text.small {
  48. margin-top: -23px;
  49. min-width: 24px;
  50. padding-top: 32px;
  51. font-size: 0.875em;
  52. }
  53. .ui.loader.text.large {
  54. margin-top: -46px;
  55. min-width: 64px;
  56. padding-top: 80px;
  57. font-size: 1em;
  58. }
  59. /*******************************
  60. States
  61. *******************************/
  62. .ui.loader.active,
  63. .ui.loader.visible {
  64. display: block;
  65. }
  66. .ui.loader.disabled,
  67. .ui.loader.hidden {
  68. display: none;
  69. }
  70. /*******************************
  71. Variations
  72. *******************************/
  73. /*-------------------
  74. Inverted
  75. --------------------*/
  76. .ui.dimmer .ui.text.loader,
  77. .ui.inverted.text.loader {
  78. color: rgba(255, 255, 255, 0.8);
  79. }
  80. .ui.inverted.dimmer .ui.text.loader {
  81. color: rgba(0, 0, 0, 0.8);
  82. }
  83. /* Tiny Size */
  84. .ui.dimmer .mini.ui.loader,
  85. .ui.inverted .mini.ui.loader {
  86. background-image: url(../images/loader-mini-inverted.gif);
  87. }
  88. /* Small Size */
  89. .ui.dimmer .small.ui.loader,
  90. .ui.inverted .small.ui.loader {
  91. background-image: url(../images/loader-small-inverted.gif);
  92. }
  93. /* Standard Size */
  94. .ui.dimmer .ui.loader,
  95. .ui.inverted.loader {
  96. background-image: url(../images/loader-medium-inverted.gif);
  97. }
  98. /* Large Size */
  99. .ui.dimmer .large.ui.loader,
  100. .ui.inverted .large.ui.loader {
  101. background-image: url(../images/loader-large-inverted.gif);
  102. }
  103. /*-------------------
  104. Sizes
  105. --------------------*/
  106. /* Tiny Size */
  107. .ui.inverted.dimmer .ui.loader.mini,
  108. .ui.loader.mini {
  109. width: 16px;
  110. height: 16px;
  111. background-image: url(../images/loader-mini.gif);
  112. margin: -8px 0px 0px -8px;
  113. }
  114. /* Small Size */
  115. .ui.inverted.dimmer .ui.loader.small,
  116. .ui.loader.small {
  117. width: 24px;
  118. height: 24px;
  119. background-image: url(../images/loader-small.gif);
  120. margin: -12px 0px 0px -12px;
  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. margin: -32px 0px 0px -32px;
  136. }
  137. /*-------------------
  138. Inline
  139. --------------------*/
  140. .ui.inline.loader {
  141. position: static;
  142. vertical-align: middle;
  143. margin: 0em;
  144. }
  145. .ui.inline.loader.active,
  146. .ui.inline.loader.visible {
  147. display: inline-block;
  148. }