@keyframes square-animation{0%{top:0;left:0}10.5%{top:0;left:0}12.5%{top:0;left:32px}23%{top:0;left:32px}25%{top:0;left:64px}35.5%{top:0;left:64px}37.5%{top:32px;left:64px}48%{top:32px;left:64px}50%{top:32px;left:32px}60.5%{top:32px;left:32px}62.5%{top:64px;left:32px}73%{top:64px;left:32px}75%{top:64px;left:0}85.5%{top:64px;left:0}87.5%{top:32px;left:0}98%{top:32px;left:0}to{top:0;left:0}}.loader{width:96px;height:96px;position:relative;transform:rotate(45deg)}.loader-square{background:#fff 50%/cover fixed;border-radius:0;width:28px;height:28px;margin:2px;animation:10s ease-in-out infinite both square-animation;position:absolute;top:0;left:0}.loader-square:nth-of-type(0){animation-delay:0s}.loader-square:first-of-type{animation-delay:-1.42857s}.loader-square:nth-of-type(2){animation-delay:-2.85714s}.loader-square:nth-of-type(3){animation-delay:-4.28571s}.loader-square:nth-of-type(4){animation-delay:-5.71429s}.loader-square:nth-of-type(5){animation-delay:-7.14286s}.loader-square:nth-of-type(6){animation-delay:-8.57143s}.loader-square:nth-of-type(7){animation-delay:-10s}