apps/workbench/app/assets/stylesheets/loading.css

   1 /* http://codepen.io/alucard11/pen/IxLDJ */
   2
   3 .loading {
   4     background: #1b1b1b;
   5 }
   6
   7 .loading .socket{
   8     width: 200px;
   9     height: 200px;
  10     position: absolute;
  11     left: 50%;
  12     margin-left: -100px;
  13     top: 50%;
  14     margin-top: -100px;
  15 }
  16
  17 .loading .hex-brick{
  18     background: #ABF8FF;
  19     width: 30px;
  20     height: 17px;
  21     position: absolute;
  22     top: 5px;
  23     animation-name: fade;
  24     animation-duration: 2s;
  25     animation-iteration-count: infinite;
  26     -webkit-animation-name: fade;
  27     -webkit-animation-duration: 2s;
  28     -webkit-animation-iteration-count: infinite;
  29 }
  30
  31 .loading .h2{
  32     transform: rotate(60deg);
  33     -webkit-transform: rotate(60deg);
  34 }
  35
  36 .loading .h3{
  37     transform: rotate(-60deg);
  38     -webkit-transform: rotate(-60deg);
  39 }
  40
  41 .loading .gel{
  42     height: 30px;
  43     width: 30px;
  44     transition: all .3s;
  45     -webkit-transition: all .3s;
  46     position: absolute;
  47     top: 50%;
  48     left: 50%;
  49 }
  50
  51 .loading .center-gel{
  52     margin-left: -15px;
  53     margin-top: -15px;
  54
  55     animation-name: pulse;
  56     animation-duration: 2s;
  57     animation-iteration-count: infinite;
  58     -webkit-animation-name: pulse;
  59     -webkit-animation-duration: 2s;
  60     -webkit-animation-iteration-count: infinite;
  61 }
  62
  63 .loading .c1{
  64     margin-left: -47px;
  65     margin-top: -15px;
  66 }
  67
  68 .loading .c2{
  69     margin-left: -31px;
  70     margin-top: -43px;
  71 }
  72
  73 .loading .c3{
  74     margin-left: 1px;
  75     margin-top: -43px;
  76 }
  77
  78 .loading .c4{
  79     margin-left: 17px;
  80     margin-top: -15px;
  81 }
  82 .loading .c5{
  83     margin-left: -31px;
  84     margin-top: 13px;
  85 }
  86
  87 .loading .c6{
  88     margin-left: 1px;
  89     margin-top: 13px;
  90 }
  91
  92 .loading .c7{
  93     margin-left: -63px;
  94     margin-top: -43px;
  95 }
  96
  97 .loading .c8{
  98     margin-left: 33px;
  99     margin-top: -43px;
 100 }
 101
 102 .loading .c9{
 103     margin-left: -15px;
 104     margin-top: 41px;
 105 }
 106
 107 .loading .c10{
 108     margin-left: -63px;
 109     margin-top: 13px;
 110 }
 111
 112 .loading .c11{
 113     margin-left: 33px;
 114     margin-top: 13px;
 115 }
 116
 117 .loading .c12{
 118     margin-left: -15px;
 119     margin-top: -71px;
 120 }
 121
 122 .loading .c13{
 123     margin-left: -47px;
 124     margin-top: -71px;
 125 }
 126
 127 .loading .c14{
 128     margin-left: 17px;
 129     margin-top: -71px;
 130 }
 131
 132 .loading .c15{
 133     margin-left: -47px;
 134     margin-top: 41px;
 135 }
 136
 137 .loading .c16{
 138     margin-left: 17px;
 139     margin-top: 41px;
 140 }
 141
 142 .c17{
 143     margin-left: -79px;
 144     margin-top: -15px;
 145 }
 146
 147 .loading .c18{
 148     margin-left: 49px;
 149     margin-top: -15px;
 150 }
 151
 152 .loading .c19{
 153     margin-left: -63px;
 154     margin-top: -99px;
 155 }
 156
 157 .loading .c20{
 158     margin-left: 33px;
 159     margin-top: -99px;
 160 }
 161
 162 .loading .c21{
 163     margin-left: 1px;
 164     margin-top: -99px;
 165 }
 166
 167 .loading .c22{
 168     margin-left: -31px;
 169     margin-top: -99px;
 170 }
 171
 172 .loading .c23{
 173     margin-left: -63px;
 174     margin-top: 69px;
 175 }
 176
 177 .loading .c24{
 178     margin-left: 33px;
 179     margin-top: 69px;
 180 }
 181
 182 .loading .c25{
 183     margin-left: 1px;
 184     margin-top: 69px;
 185 }
 186
 187 .loading .c26{
 188     margin-left: -31px;
 189     margin-top: 69px;
 190 }
 191
 192 .loading .c27{
 193     margin-left: -79px;
 194     margin-top: -15px;
 195 }
 196
 197 .loading .c28{
 198     margin-left: -95px;
 199     margin-top: -43px;
 200 }
 201
 202 .loading .c29{
 203     margin-left: -95px;
 204     margin-top: 13px;
 205 }
 206
 207 .loading .c30{
 208     margin-left: 49px;
 209     margin-top: 41px;
 210 }
 211
 212 .loading .c31{
 213     margin-left: -79px;
 214     margin-top: -71px;
 215 }
 216
 217 .loading .c32{
 218     margin-left: -111px;
 219     margin-top: -15px;
 220 }
 221
 222 .loading .c33{
 223     margin-left: 65px;
 224     margin-top: -43px;
 225 }
 226
 227 .loading .c34{
 228     margin-left: 65px;
 229     margin-top: 13px;
 230 }
 231
 232 .loading .c35{
 233     margin-left: -79px;
 234     margin-top: 41px;
 235 }
 236
 237 .loading .c36{
 238     margin-left: 49px;
 239     margin-top: -71px;
 240 }
 241
 242 .loading .c37{
 243     margin-left: 81px;
 244     margin-top: -15px;
 245 }
 246
 247 .loading .r1{
 248     animation-name: pulse;
 249     animation-duration: 2s;
 250     animation-iteration-count: infinite;
 251     animation-delay: .2s;
 252     -webkit-animation-name: pulse;
 253     -webkit-animation-duration: 2s;
 254     -webkit-animation-iteration-count: infinite;
 255     -webkit-animation-delay: .2s;
 256 }
 257
 258 .loading .r2{
 259     animation-name: pulse;
 260     animation-duration: 2s;
 261     animation-iteration-count: infinite;
 262     animation-delay: .4s;
 263     -webkit-animation-name: pulse;
 264     -webkit-animation-duration: 2s;
 265     -webkit-animation-iteration-count: infinite;
 266     -webkit-animation-delay: .4s;
 267 }
 268
 269 .loading .r3{
 270     animation-name: pulse;
 271     animation-duration: 2s;
 272     animation-iteration-count: infinite;
 273     animation-delay: .6s;
 274     -webkit-animation-name: pulse;
 275     -webkit-animation-duration: 2s;
 276     -webkit-animation-iteration-count: infinite;
 277     -webkit-animation-delay: .6s;
 278 }
 279
 280 .loading .r1 > .hex-brick{
 281     animation-name: fade;
 282     animation-duration: 2s;
 283     animation-iteration-count: infinite;
 284     animation-delay: .2s;
 285     -webkit-animation-name: fade;
 286     -webkit-animation-duration: 2s;
 287     -webkit-animation-iteration-count: infinite;
 288     -webkit-animation-delay: .2s;
 289 }
 290
 291 .loading .r2 > .hex-brick{
 292     animation-name: fade;
 293     animation-duration: 2s;
 294     animation-iteration-count: infinite;
 295     animation-delay: .4s;
 296     -webkit-animation-name: fade;
 297     -webkit-animation-duration: 2s;
 298     -webkit-animation-iteration-count: infinite;
 299     -webkit-animation-delay: .4s;
 300 }
 301
 302 .loading .r3 > .hex-brick{
 303     animation-name: fade;
 304     animation-duration: 2s;
 305     animation-iteration-count: infinite;
 306     animation-delay: .6s;
 307     -webkit-animation-name: fade;
 308     -webkit-animation-duration: 2s;
 309     -webkit-animation-iteration-count: infinite;
 310     -webkit-animation-delay: .6s;
 311 }
 312
 313
 314 @keyframes pulse{
 315     0%{
 316         -webkit-transform: scale(1);
 317         transform: scale(1);
 318     }
 319
 320     50%{
 321         -webkit-transform: scale(0.01);
 322         transform: scale(0.01);
 323     }
 324
 325     100%{
 326         -webkit-transform: scale(1);
 327         transform: scale(1);
 328     }
 329 }
 330
 331 @keyframes fade{
 332     0%{
 333         background: #ABF8FF;
 334     }
 335
 336     50%{
 337         background: #90BBBF;
 338     }
 339
 340     100%{
 341         background: #ABF8FF;
 342     }
 343 }
 344
 345 @-webkit-keyframes pulse{
 346     0%{
 347         -webkit-transform: scale(1);
 348         transform: scale(1);
 349     }
 350
 351     50%{
 352         -webkit-transform: scale(0.01);
 353         transform: scale(0.01);
 354     }
 355
 356     100%{
 357         -webkit-transform: scale(1);
 358         transform: scale(1);
 359     }
 360 }
 361
 362 @-webkit-keyframes fade{
 363     0%{
 364         background: #ABF8FF;
 365     }
 366
 367     50%{
 368         background: #389CA6;
 369     }
 370
 371     100%{
 372         background: #ABF8FF;
 373     }
 374 }