twitter.component.scss (974B)
1 main { 2 background: #4688F1; 3 padding: 0; 4 margin: 0; 5 height: 100%; 6 width: 100%; 7 position: absolute; 8 top: 0; 9 left: 0; 10 } 11 12 .loading{ 13 position: absolute; 14 top: 0; bottom: 0; 15 left: 0; right: 0; 16 margin: auto; 17 //border: solid; 18 width: 600px; 19 height: 50px; 20 text-transform: uppercase; 21 font-size: 18px; 22 span{ 23 display: inline-block; 24 background: tomato; 25 width: 50px; 26 height: 50px; 27 line-height: 50px; 28 text-align: center; 29 color: white; 30 text-shadow: 1px 1px 0 black; 31 position: relative; 32 top: 0; 33 box-shadow: inset 0 1px 1px -1px black, inset 0 -5px 1px -1px rgba(black, .5); 34 } 35 } 36 37 @for $i from 1 through 10{ 38 .char#{$i}{ 39 animation: foo 2s ease infinite, bar 3s linear infinite; 40 animation-delay: .1s * $i; 41 } 42 } 43 44 @keyframes foo{ 45 10%{ 46 top: -10px; 47 } 48 50%{ 49 top:0; 50 } 51 100%{ 52 top: 0; 53 } 54 } 55 56 @keyframes bar{ 57 10%{ 58 opacity: 0; 59 } 60 50%{ 61 opacity: 1; 62 } 63 100%{ 64 opacity: 1; 65 } 66 }