portal-common/src/main/webapp/common/thirdparty/fakeLoader/fakeLoader.css

   1 /**********************\r
   2  *CSS Animations by:\r
   3  *http://codepen.io/vivinantony\r
   4 ***********************/\r
   5 .spinner1 {\r
   6   width: 40px;\r
   7   height: 40px;\r
   8   position: relative;\r
   9 }\r
  10 \r
  11 \r
  12 .double-bounce1, .double-bounce2 {\r
  13   width: 100%;\r
  14   height: 100%;\r
  15   border-radius: 50%;\r
  16   background-color: #fff;\r
  17   opacity: 0.6;\r
  18   position: absolute;\r
  19   top: 0;\r
  20   left: 0;\r
  21   \r
  22   -webkit-animation: bounce 2.0s infinite ease-in-out;\r
  23   animation: bounce 2.0s infinite ease-in-out;\r
  24 }\r
  25 \r
  26 .double-bounce2 {\r
  27   -webkit-animation-delay: -1.0s;\r
  28   animation-delay: -1.0s;\r
  29 }\r
  30 \r
  31 @-webkit-keyframes bounce {\r
  32   0%, 100% { -webkit-transform: scale(0.0) }\r
  33   50% { -webkit-transform: scale(1.0) }\r
  34 }\r
  35 \r
  36 @keyframes bounce {\r
  37   0%, 100% { \r
  38     transform: scale(0.0);\r
  39     -webkit-transform: scale(0.0);\r
  40   } 50% { \r
  41     transform: scale(1.0);\r
  42     -webkit-transform: scale(1.0);\r
  43   }\r
  44 }\r
  45 \r
  46 .spinner2 {\r
  47   width: 40px;\r
  48   height: 40px;\r
  49   position: relative;\r
  50 }\r
  51 \r
  52 \r
  53 .container1 > div, .container2 > div, .container3 > div {\r
  54   width: 6px;\r
  55   height: 6px;\r
  56   background-color: #fff;\r
  57 \r
  58   border-radius: 100%;\r
  59   position: absolute;\r
  60   -webkit-animation: bouncedelay 1.2s infinite ease-in-out;\r
  61   animation: bouncedelay 1.2s infinite ease-in-out;\r
  62   /* Prevent first frame from flickering when animation starts */\r
  63   -webkit-animation-fill-mode: both;\r
  64   animation-fill-mode: both;\r
  65 }\r
  66 \r
  67 .spinner2 .spinner-container {\r
  68   position: absolute;\r
  69   width: 100%;\r
  70   height: 100%;\r
  71 }\r
  72 \r
  73 .container2 {\r
  74   -webkit-transform: rotateZ(45deg);\r
  75   transform: rotateZ(45deg);\r
  76 }\r
  77 \r
  78 .container3 {\r
  79   -webkit-transform: rotateZ(90deg);\r
  80   transform: rotateZ(90deg);\r
  81 }\r
  82 \r
  83 .circle1 { top: 0; left: 0; }\r
  84 .circle2 { top: 0; right: 0; }\r
  85 .circle3 { right: 0; bottom: 0; }\r
  86 .circle4 { left: 0; bottom: 0; }\r
  87 \r
  88 .container2 .circle1 {\r
  89   -webkit-animation-delay: -1.1s;\r
  90   animation-delay: -1.1s;\r
  91 }\r
  92 \r
  93 .container3 .circle1 {\r
  94   -webkit-animation-delay: -1.0s;\r
  95   animation-delay: -1.0s;\r
  96 }\r
  97 \r
  98 .container1 .circle2 {\r
  99   -webkit-animation-delay: -0.9s;\r
 100   animation-delay: -0.9s;\r
 101 }\r
 102 \r
 103 .container2 .circle2 {\r
 104   -webkit-animation-delay: -0.8s;\r
 105   animation-delay: -0.8s;\r
 106 }\r
 107 \r
 108 .container3 .circle2 {\r
 109   -webkit-animation-delay: -0.7s;\r
 110   animation-delay: -0.7s;\r
 111 }\r
 112 \r
 113 .container1 .circle3 {\r
 114   -webkit-animation-delay: -0.6s;\r
 115   animation-delay: -0.6s;\r
 116 }\r
 117 \r
 118 .container2 .circle3 {\r
 119   -webkit-animation-delay: -0.5s;\r
 120   animation-delay: -0.5s;\r
 121 }\r
 122 \r
 123 .container3 .circle3 {\r
 124   -webkit-animation-delay: -0.4s;\r
 125   animation-delay: -0.4s;\r
 126 }\r
 127 \r
 128 .container1 .circle4 {\r
 129   -webkit-animation-delay: -0.3s;\r
 130   animation-delay: -0.3s;\r
 131 }\r
 132 \r
 133 .container2 .circle4 {\r
 134   -webkit-animation-delay: -0.2s;\r
 135   animation-delay: -0.2s;\r
 136 }\r
 137 \r
 138 .container3 .circle4 {\r
 139   -webkit-animation-delay: -0.1s;\r
 140   animation-delay: -0.1s;\r
 141 }\r
 142 \r
 143 @-webkit-keyframes bouncedelay {\r
 144   0%, 80%, 100% { -webkit-transform: scale(0.0) }\r
 145   40% { -webkit-transform: scale(1.0) }\r
 146 }\r
 147 \r
 148 @keyframes bouncedelay {\r
 149   0%, 80%, 100% { \r
 150     transform: scale(0.0);\r
 151     -webkit-transform: scale(0.0);\r
 152   } 40% { \r
 153     transform: scale(1.0);\r
 154     -webkit-transform: scale(1.0);\r
 155   }\r
 156 }\r
 157 \r
 158 .spinner3 {\r
 159   width: 40px;\r
 160   height: 40px;\r
 161   position: relative;  \r
 162   -webkit-animation: rotate 2.0s infinite linear;\r
 163   animation: rotate 2.0s infinite linear;\r
 164 }\r
 165 \r
 166 .dot1, .dot2 {\r
 167   width: 60%;\r
 168   height: 60%;\r
 169   display: inline-block;\r
 170   position: absolute;\r
 171   top: 0;\r
 172   background-color: #fff;\r
 173   border-radius: 100%;\r
 174   \r
 175   -webkit-animation: bounce 2.0s infinite ease-in-out;\r
 176   animation: bounce 2.0s infinite ease-in-out;\r
 177 }\r
 178 \r
 179 .dot2 {\r
 180   top: auto;\r
 181   bottom: 0px;\r
 182   -webkit-animation-delay: -1.0s;\r
 183   animation-delay: -1.0s;\r
 184 }\r
 185 \r
 186 @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}\r
 187 @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}\r
 188 \r
 189 @-webkit-keyframes bounce {\r
 190   0%, 100% { -webkit-transform: scale(0.0) }\r
 191   50% { -webkit-transform: scale(1.0) }\r
 192 }\r
 193 \r
 194 @keyframes bounce {\r
 195   0%, 100% { \r
 196     transform: scale(0.0);\r
 197     -webkit-transform: scale(0.0);\r
 198   } 50% { \r
 199     transform: scale(1.0);\r
 200     -webkit-transform: scale(1.0);\r
 201   }\r
 202 }\r
 203 \r
 204 .spinner4 {\r
 205   width: 30px;\r
 206   height: 30px;\r
 207   background-color: #fff;\r
 208   -webkit-animation: rotateplane 1.2s infinite ease-in-out;\r
 209   animation: rotateplane 1.2s infinite ease-in-out;\r
 210 }\r
 211 \r
 212 @-webkit-keyframes rotateplane {\r
 213   0% { -webkit-transform: perspective(120px) }\r
 214   50% { -webkit-transform: perspective(120px) rotateY(180deg) }\r
 215   100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }\r
 216 }\r
 217 \r
 218 @keyframes rotateplane {\r
 219   0% { \r
 220     transform: perspective(120px) rotateX(0deg) rotateY(0deg);\r
 221     -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) \r
 222   } 50% { \r
 223     transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);\r
 224     -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) \r
 225   } 100% { \r
 226     transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\r
 227     -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);\r
 228   }\r
 229 }\r
 230 \r
 231 .spinner5 {\r
 232   width: 32px;\r
 233   height: 32px;\r
 234   position: relative;\r
 235 }\r
 236 \r
 237 .cube1, .cube2 {\r
 238   background-color: #fff;\r
 239   width: 10px;\r
 240   height: 10px;\r
 241   position: absolute;\r
 242   top: 0;\r
 243   left: 0;\r
 244   \r
 245   -webkit-animation: cubemove 1.8s infinite ease-in-out;\r
 246   animation: cubemove 1.8s infinite ease-in-out;\r
 247 }\r
 248 \r
 249 .cube2 {\r
 250   -webkit-animation-delay: -0.9s;\r
 251   animation-delay: -0.9s;\r
 252 }\r
 253 \r
 254 @-webkit-keyframes cubemove {\r
 255   25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }\r
 256   50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }\r
 257   75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }\r
 258   100% { -webkit-transform: rotate(-360deg) }\r
 259 }\r
 260 \r
 261 @keyframes cubemove {\r
 262   25% { \r
 263     transform: translateX(42px) rotate(-90deg) scale(0.5);\r
 264     -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);\r
 265   } 50% { \r
 266     transform: translateX(42px) translateY(42px) rotate(-179deg);\r
 267     -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);\r
 268   } 50.1% { \r
 269     transform: translateX(42px) translateY(42px) rotate(-180deg);\r
 270     -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);\r
 271   } 75% { \r
 272     transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\r
 273     -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);\r
 274   } 100% { \r
 275     transform: rotate(-360deg);\r
 276     -webkit-transform: rotate(-360deg);\r
 277   }\r
 278 }\r
 279 \r
 280 .spinner6 {\r
 281   width: 50px;\r
 282   height: 30px;\r
 283   text-align: center;\r
 284 }\r
 285 \r
 286 .spinner6 > div {\r
 287   background-color: #fff;\r
 288   height: 100%;\r
 289   width: 6px;\r
 290   margin-left:2px;\r
 291   display: inline-block;\r
 292   \r
 293   -webkit-animation: stretchdelay 1.2s infinite ease-in-out;\r
 294   animation: stretchdelay 1.2s infinite ease-in-out;\r
 295 }\r
 296 \r
 297 .spinner6 .rect2 {\r
 298   -webkit-animation-delay: -1.1s;\r
 299   animation-delay: -1.1s;\r
 300 }\r
 301 \r
 302 .spinner6 .rect3 {\r
 303   -webkit-animation-delay: -1.0s;\r
 304   animation-delay: -1.0s;\r
 305 }\r
 306 \r
 307 .spinner6 .rect4 {\r
 308   -webkit-animation-delay: -0.9s;\r
 309   animation-delay: -0.9s;\r
 310 }\r
 311 \r
 312 .spinner6 .rect5 {\r
 313   -webkit-animation-delay: -0.8s;\r
 314   animation-delay: -0.8s;\r
 315 }\r
 316 \r
 317 @-webkit-keyframes stretchdelay {\r
 318   0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  \r
 319   20% { -webkit-transform: scaleY(1.0) }\r
 320 }\r
 321 \r
 322 @keyframes stretchdelay {\r
 323   0%, 40%, 100% { \r
 324     transform: scaleY(0.4);\r
 325     -webkit-transform: scaleY(0.4);\r
 326   }  20% { \r
 327     transform: scaleY(1.0);\r
 328     -webkit-transform: scaleY(1.0);\r
 329   }\r
 330 }\r
 331   .spinner7 {\r
 332       width: 90px;\r
 333       height: 30px;\r
 334       text-align: center;\r
 335     }\r
 336 \r
 337     .spinner7 > div {\r
 338       background-color: #fff;\r
 339       height: 15px;\r
 340       width: 15px;\r
 341       margin-left:3px;\r
 342       border-radius: 50%;\r
 343       display: inline-block;\r
 344       \r
 345       -webkit-animation: stretchdelay 0.7s infinite ease-in-out;\r
 346       animation: stretchdelay 0.7s infinite ease-in-out;\r
 347     }\r
 348 \r
 349     .spinner7 .circ2 {\r
 350       -webkit-animation-delay: -0.6s;\r
 351       animation-delay: -0.6s;\r
 352     }\r
 353 \r
 354     .spinner7 .circ3 {\r
 355       -webkit-animation-delay: -0.5s;\r
 356       animation-delay: -0.5s;\r
 357     }\r
 358 \r
 359     .spinner7 .circ4 {\r
 360       -webkit-animation-delay: -0.4s;\r
 361       animation-delay: -0.4s;\r
 362     }\r
 363 \r
 364     .spinner7 .circ5 {\r
 365       -webkit-animation-delay: -0.3s;\r
 366       animation-delay: -0.3s;\r
 367     }\r
 368 \r
 369     @-webkit-keyframes stretchdelay {\r
 370       0%, 40%, 100% { -webkit-transform: translateY(-10px) }  \r
 371       20% { -webkit-transform: translateY(-20px) }\r
 372     }\r
 373 \r
 374     @keyframes stretchdelay {\r
 375       0%, 40%, 100% { \r
 376         transform: translateY(-10px);\r
 377         -webkit-transform: translateY(-10px);\r
 378       } 20% {\r
 379         transform: translateY(-20px);\r
 380         -webkit-transform: translateY(-20px);\r
 381       }\r
 382     }