@-webkit-keyframes scaled { 0% { .transform(scale(1)); } 20% { .transform(scale(1.55)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @-moz-keyframes scaled { 0% { .transform(scale(1)); } 20% { .transform(scale(1.55)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @-o-keyframes scaled { 0% { .transform(scale(1)); } 20% { .transform(scale(1.55)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @keyframes scaled { 0% { .transform(scale(1)); } 20% { .transform(scale(1.55)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @-webkit-keyframes minor { 0% { .transform(scale(1)); } 20% { .transform(scale(1.08)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @-moz-keyframes minor { 0% { .transform(scale(1)); } 20% { .transform(scale(1.08)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @-o-keyframes minor { 0% { .transform(scale(1)); } 20% { .transform(scale(1.08)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } @keyframes minor { 0% { .transform(scale(1)); } 20% { .transform(scale(1.08)); } 50%{ .transform(scale(1)); } 100% { .transform(scale(1)); } } .rocket-loader{ position: fixed; top: 50%; left: 50%; margin-left: -75px; margin-top: -75px; z-index: 9999; width: 150px; height: 150px; .inner{ .animation(minor 1s ease-out infinite 1.625s); .transform-origin(100px, 100px); } .outer{ .animation(minor 1s ease-out infinite 1.625s); .transform-origin(100px, 100px); } circle{ &:nth-child(1){ .animation(scaled 1s ease-out infinite .3s); .transform-origin(135px, 100px); } &:nth-child(2){ .animation(scaled 1s ease-out infinite .15s); .transform-origin(108px, 100px); } &:nth-child(3){ .animation(scaled 1s ease-out infinite); .transform-origin(81px, 100px); } } }