관리-도구
편집 파일: pre-loader.css
#preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #fff; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; height: 100%; z-index: 10000; /* makes sure it stays on top */ } #status { width: 50px; height: 30px; position: fixed; left: 50%; /* centers the loading animation horizontally one the screen */ top: 50%; /* centers the loading animation vertically one the screen */ margin: -25px 0 0 -15px; /* is width and height divided by two */ } .spinner { margin: 0px auto; width: 50px; height: 30px; text-align: center; font-size: 10px; } .spinner > div { background-color: #5f71fa; height: 100%; width: 6px; display: inline-block; -webkit-animation: stretchdelay 1.2s infinite ease-in-out; animation: stretchdelay 1.2s infinite ease-in-out; } .spinner .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .spinner .rect3 { -webkit-animation-delay: -1s; animation-delay: -1s; } .spinner .rect4 { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .spinner .rect5 { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } @-webkit-keyframes stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.5); } 20% { -webkit-transform: scaleY(1); } } @keyframes stretchdelay { 0%, 40%, 100% { transform: scaleY(0.5); -webkit-transform: scaleY(0.5); } 20% { transform: scaleY(1); -webkit-transform: scaleY(1); } }