.static { width: 100%; height: 100%; background-color: #bbbbbb; color: #7f7f7f; font-size: 50px; } .static span { top: calc(50% - 25px); left: calc(50% - 25px); } .sk-cube-grid { width: 100%; height: 100%; } .sk-cube-grid .sk-cube { width: calc(100% / 3); height: calc(100% / 3); background-color: #bbbbbb; float: left; } .sk-cube-grid.animate .sk-cube { -webkit-animation: sk-cubeGridScaleDelay 4.6s infinite ease-in-out; animation: sk-cubeGridScaleDelay 4.6s infinite ease-in-out; } .sk-cube-grid.animate .sk-cube1 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .sk-cube-grid.animate .sk-cube2 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-cube-grid.animate .sk-cube3 { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .sk-cube-grid.animate .sk-cube4 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid.animate .sk-cube5 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .sk-cube-grid.animate .sk-cube6 { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .sk-cube-grid.animate .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; } .sk-cube-grid.animate .sk-cube8 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .sk-cube-grid.animate .sk-cube9 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } @-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } } @keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }