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.

lubusy.css 9.2KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. .lu-busy{
  2. position:absolute;
  3. top:0px;
  4. left:0px;
  5. right:0px;
  6. bottom:0px;
  7. }
  8. .lu-busy-animation.ng-hide-add,
  9. .lu-busy-animation.ng-hide-remove {
  10. -webkit-transition:all .3s ease;
  11. -moz-transition:all .3s ease;
  12. -o-transition:all .3s ease;
  13. transition:all .3s ease;
  14. display:block !important;
  15. }
  16. .lu-busy-animation.ng-hide-remove {
  17. opacity:0;
  18. -webkit-transform:translate(0px,-40px);
  19. -moz-transform:translate(0px,-40px);
  20. -ms-transform:translate(0px,-40px);
  21. -o-transform:translate(0px,-40px);
  22. transform:translate(0px,-40px);
  23. }
  24. .lu-busy-animation.ng-hide-remove.ng-hide-remove-active {
  25. opacity:1;
  26. -webkit-transform:translate(0px,0px);
  27. -moz-transform:translate(0px,0px);
  28. -ms-transform:translate(0px,0px);
  29. -o-transform:translate(0px,0px);
  30. transform:translate(0px,0px);
  31. }
  32. .lu-busy-animation.ng-hide-add {
  33. opacity:1;
  34. -webkit-transform:translate(0px,0px);
  35. -moz-transform:translate(0px,0px);
  36. -ms-transform:translate(0px,0px);
  37. -o-transform:translate(0px,0px);
  38. transform:translate(0px,0px);
  39. }
  40. .lu-busy-animation.ng-hide-add.ng-hide-add-active {
  41. opacity:0;
  42. -webkit-transform:translate(0px,-40px);
  43. -moz-transform:translate(0px,-40px);
  44. -ms-transform:translate(0px,-40px);
  45. -o-transform:translate(0px,-40px);
  46. transform:translate(0px,-40px);
  47. }
  48. .lu-busy-backdrop {
  49. background-color:white;
  50. opacity:.7;
  51. }
  52. .lu-busy-backdrop-animation.ng-hide-add,
  53. .lu-busy-backdrop-animation.ng-hide-remove {
  54. -webkit-transition:opacity .3s ease;
  55. -moz-transition:opacity .3s ease;
  56. -o-transition:opacity .3s ease;
  57. transition:opacity .3s ease;
  58. display:block !important;
  59. }
  60. .lu-busy-backdrop-animation.ng-hide {
  61. opacity:0;
  62. }
  63. /* All styles below are for the default template. */
  64. .lu-busy-default-wrapper {
  65. text-align:center;
  66. }
  67. .lu-busy-default-sign{
  68. display: inline-block;
  69. position:relative;
  70. padding-bottom: 6px;
  71. color:#333333;
  72. text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);
  73. background-color:#e9eeee;
  74. border:1px solid #dddddd;
  75. border-top-width:0;
  76. -webkit-border-radius:7px;
  77. -moz-border-radius:7px;
  78. border-radius:7px;
  79. border-top-left-radius:0;
  80. border-top-right-radius:0;
  81. -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  82. -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  83. box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
  84. }
  85. .lu-busy-default-text{
  86. margin:7px 12px 0 40px;
  87. font-size:16px;
  88. color:#555;
  89. text-align: left;
  90. max-width: 400px;
  91. }
  92. .lu-busy-default-error-text{
  93. margin:7px 12px 0 12px;
  94. font-size:16px;
  95. color:#555;
  96. text-align: left;
  97. max-width: 400px;
  98. }
  99. .lu-busy-default-spinner{
  100. position:absolute;
  101. width:25px;
  102. height:25px;
  103. display:inline-block;
  104. top:6px;
  105. left:8px;
  106. }
  107. .lu-busy-default-spinner div{
  108. width:12%;
  109. height:26%;
  110. background:#000;
  111. position:absolute;
  112. left:44.5%;
  113. top:37%;
  114. opacity:0;
  115. -webkit-animation:lu-busy-spinner-anim 1s linear infinite;
  116. -moz-animation:lu-busy-spinner-anim 1s linear infinite;
  117. -ms-animation:lu-busy-spinner-anim 1s linear infinite;
  118. -o-animation:lu-busy-spinner-anim 1s linear infinite;
  119. animation:lu-busy-spinner-anim 1s linear infinite;
  120. -webkit-border-radius:50px;
  121. -moz-border-radius:50px;
  122. border-radius:50px;
  123. -webkit-box-shadow:0 0 3px rgba(0,0,0,0.2);
  124. -moz-box-shadow:0 0 3px rgba(0,0,0,0.2);
  125. box-shadow:0 0 3px rgba(0,0,0,0.2);
  126. }
  127. .lu-busy-default-spinner div.bar1{
  128. -webkit-transform:rotate(0deg) translate(0, -142%);
  129. -moz-transform:rotate(0deg) translate(0, -142%);
  130. -ms-transform:rotate(0deg) translate(0, -142%);
  131. -o-transform:rotate(0deg) translate(0, -142%);
  132. transform:rotate(0deg) translate(0, -142%);
  133. -webkit-animation-delay:0s;
  134. -moz-animation-delay:0s;
  135. -ms-animation-delay:0s;
  136. -o-animation-delay:0s;
  137. animation-delay:0s;
  138. }
  139. .lu-busy-default-spinner div.bar2{
  140. -webkit-transform:rotate(30deg) translate(0, -142%);
  141. -moz-transform:rotate(30deg) translate(0, -142%);
  142. -ms-transform:rotate(30deg) translate(0, -142%);
  143. -o-transform:rotate(30deg) translate(0, -142%);
  144. transform:rotate(30deg) translate(0, -142%);
  145. -webkit-animation-delay:-0.9167s;
  146. -moz-animation-delay:-0.9167s;
  147. -ms-animation-delay:-0.9167s;
  148. -o-animation-delay:-0.9167s;
  149. animation-delay:-0.9167s;
  150. }
  151. .lu-busy-default-spinner div.bar3{
  152. -webkit-transform:rotate(60deg) translate(0, -142%);
  153. -moz-transform:rotate(60deg) translate(0, -142%);
  154. -ms-transform:rotate(60deg) translate(0, -142%);
  155. -o-transform:rotate(60deg) translate(0, -142%);
  156. transform:rotate(60deg) translate(0, -142%);
  157. -webkit-animation-delay:-0.833s;
  158. -moz-animation-delay:-0.833s;
  159. -ms-animation-delay:-0.833s;
  160. -o-animation-delay:-0.833s;
  161. animation-delay:-0.833s;
  162. }
  163. .lu-busy-default-spinner div.bar4{
  164. -webkit-transform:rotate(90deg) translate(0, -142%);
  165. -moz-transform:rotate(90deg) translate(0, -142%);
  166. -ms-transform:rotate(90deg) translate(0, -142%);
  167. -o-transform:rotate(90deg) translate(0, -142%);
  168. transform:rotate(90deg) translate(0, -142%);
  169. -webkit-animation-delay:-0.75s;
  170. -moz-animation-delay:-0.75s;
  171. -ms-animation-delay:-0.75s;
  172. -o-animation-delay:-0.75s;
  173. animation-delay:-0.75s;
  174. }
  175. .lu-busy-default-spinner div.bar5{
  176. -webkit-transform:rotate(120deg) translate(0, -142%);
  177. -moz-transform:rotate(120deg) translate(0, -142%);
  178. -ms-transform:rotate(120deg) translate(0, -142%);
  179. -o-transform:rotate(120deg) translate(0, -142%);
  180. transform:rotate(120deg) translate(0, -142%);
  181. -webkit-animation-delay:-0.667s;
  182. -moz-animation-delay:-0.667s;
  183. -ms-animation-delay:-0.667s;
  184. -o-animation-delay:-0.667s;
  185. animation-delay:-0.667s;
  186. }
  187. .lu-busy-default-spinner div.bar6{
  188. -webkit-transform:rotate(150deg) translate(0, -142%);
  189. -moz-transform:rotate(150deg) translate(0, -142%);
  190. -ms-transform:rotate(150deg) translate(0, -142%);
  191. -o-transform:rotate(150deg) translate(0, -142%);
  192. transform:rotate(150deg) translate(0, -142%);
  193. -webkit-animation-delay:-0.5833s;
  194. -moz-animation-delay:-0.5833s;
  195. -ms-animation-delay:-0.5833s;
  196. -o-animation-delay:-0.5833s;
  197. animation-delay:-0.5833s;
  198. }
  199. .lu-busy-default-spinner div.bar7{
  200. -webkit-transform:rotate(180deg) translate(0, -142%);
  201. -moz-transform:rotate(180deg) translate(0, -142%);
  202. -ms-transform:rotate(180deg) translate(0, -142%);
  203. -o-transform:rotate(180deg) translate(0, -142%);
  204. transform:rotate(180deg) translate(0, -142%);
  205. -webkit-animation-delay:-0.5s;
  206. -moz-animation-delay:-0.5s;
  207. -ms-animation-delay:-0.5s;
  208. -o-animation-delay:-0.5s;
  209. animation-delay:-0.5s;
  210. }
  211. .lu-busy-default-spinner div.bar8{
  212. -webkit-transform:rotate(210deg) translate(0, -142%);
  213. -moz-transform:rotate(210deg) translate(0, -142%);
  214. -ms-transform:rotate(210deg) translate(0, -142%);
  215. -o-transform:rotate(210deg) translate(0, -142%);
  216. transform:rotate(210deg) translate(0, -142%);
  217. -webkit-animation-delay:-0.41667s;
  218. -moz-animation-delay:-0.41667s;
  219. -ms-animation-delay:-0.41667s;
  220. -o-animation-delay:-0.41667s;
  221. animation-delay:-0.41667s;
  222. }
  223. .lu-busy-default-spinner div.bar9{
  224. -webkit-transform:rotate(240deg) translate(0, -142%);
  225. -moz-transform:rotate(240deg) translate(0, -142%);
  226. -ms-transform:rotate(240deg) translate(0, -142%);
  227. -o-transform:rotate(240deg) translate(0, -142%);
  228. transform:rotate(240deg) translate(0, -142%);
  229. -webkit-animation-delay:-0.333s;
  230. -moz-animation-delay:-0.333s;
  231. -ms-animation-delay:-0.333s;
  232. -o-animation-delay:-0.333s;
  233. animation-delay:-0.333s;
  234. }
  235. .lu-busy-default-spinner div.bar10{
  236. -webkit-transform:rotate(270deg) translate(0, -142%);
  237. -moz-transform:rotate(270deg) translate(0, -142%);
  238. -ms-transform:rotate(270deg) translate(0, -142%);
  239. -o-transform:rotate(270deg) translate(0, -142%);
  240. transform:rotate(270deg) translate(0, -142%);
  241. -webkit-animation-delay:-0.25s;
  242. -moz-animation-delay:-0.25s;
  243. -ms-animation-delay:-0.25s;
  244. -o-animation-delay:-0.25s;
  245. animation-delay:-0.25s;
  246. }
  247. .lu-busy-default-spinner div.bar11{
  248. -webkit-transform:rotate(300deg) translate(0, -142%);
  249. -moz-transform:rotate(300deg) translate(0, -142%);
  250. -ms-transform:rotate(300deg) translate(0, -142%);
  251. -o-transform:rotate(300deg) translate(0, -142%);
  252. transform:rotate(300deg) translate(0, -142%);
  253. -webkit-animation-delay:-0.1667s;
  254. -moz-animation-delay:-0.1667s;
  255. -ms-animation-delay:-0.1667s;
  256. -o-animation-delay:-0.1667s;
  257. animation-delay:-0.1667s;
  258. }
  259. .lu-busy-default-spinner div.bar12{
  260. -webkit-transform:rotate(330deg) translate(0, -142%);
  261. -moz-transform:rotate(330deg) translate(0, -142%);
  262. -ms-transform:rotate(330deg) translate(0, -142%);
  263. -o-transform:rotate(330deg) translate(0, -142%);
  264. transform:rotate(330deg) translate(0, -142%);
  265. -webkit-animation-delay:-0.0833s;
  266. -moz-animation-delay:-0.0833s;
  267. -ms-animation-delay:-0.0833s;
  268. -o-animation-delay:-0.0833s;
  269. animation-delay:-0.0833s;
  270. }
  271. @-webkit-keyframes lu-busy-spinner-anim{
  272. from {opacity: 1;}
  273. to {opacity: 0.25;}
  274. }
  275. @-moz-keyframes lu-busy-spinner-anim{
  276. from {opacity: 1;}
  277. to {opacity: 0.25;}
  278. }
  279. @keyframes lu-busy-spinner-anim{
  280. from {opacity: 1;}
  281. to {opacity: 0.25;}
  282. }