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.

141 lines
2.9 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: 14px;
  40. }
  41. .ui.loader.text.mini {
  42. margin-top: -16px;
  43. min-width: 16px;
  44. padding-top: 20px;
  45. font-size: 11px;
  46. }
  47. .ui.loader.text.small {
  48. margin-top: -23px;
  49. min-width: 24px;
  50. padding-top: 32px;
  51. font-size: 13px;
  52. }
  53. .ui.loader.text.large {
  54. margin-top: -46px;
  55. min-width: 64px;
  56. padding-top: 80px;
  57. font-size: 16px;
  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(0, 0, 0, 0.8);
  79. }
  80. /* Tiny Size */
  81. .ui.dimmer .mini.ui.loader,
  82. .ui.inverted .mini.ui.loader {
  83. background-image: url(../images/loader-mini-inverted.gif);
  84. }
  85. /* Small Size */
  86. .ui.dimmer .small.ui.loader,
  87. .ui.inverted .small.ui.loader {
  88. background-image: url(../images/loader-small-inverted.gif);
  89. }
  90. /* Standard Size */
  91. .ui.dimmer .ui.loader,
  92. .ui.inverted.loader {
  93. background-image: url(../images/loader-medium-inverted.gif);
  94. }
  95. /* Large Size */
  96. .ui.dimmer .large.ui.loader,
  97. .ui.inverted .large.ui.loader {
  98. background-image: url(../images/loader-large-inverted.gif);
  99. }
  100. /*-------------------
  101. Sizes
  102. --------------------*/
  103. /* Tiny Size */
  104. .ui.inverted.dimmer .ui.loader.mini,
  105. .ui.loader.mini {
  106. width: 16px;
  107. height: 16px;
  108. background-image: url(../images/loader-mini.gif);
  109. margin: -8px 0px 0px -8px;
  110. }
  111. /* Small Size */
  112. .ui.inverted.dimmer .ui.loader.small,
  113. .ui.loader.small {
  114. width: 24px;
  115. height: 24px;
  116. background-image: url(../images/loader-small.gif);
  117. margin: -12px 0px 0px -12px;
  118. }
  119. .ui.inverted.dimmer .ui.loader,
  120. .ui.loader {
  121. width: 32px;
  122. height: 32px;
  123. background: url(../images/loader-medium.gif) no-repeat;
  124. background-position: 48% 0px;
  125. }
  126. /* Large Size */
  127. .ui.inverted.dimmer .ui.loader.large,
  128. .ui.loader.large {
  129. width: 64px;
  130. height: 64px;
  131. background-image: url(../images/loader-large.gif);
  132. margin: -32px 0px 0px -32px;
  133. }
  134. /*-------------------
  135. Inline
  136. --------------------*/
  137. .ui.inline.loader {
  138. display: inline-block;
  139. vertical-align: middle;
  140. margin: 0em;
  141. }