.__SETUP_LOADING__ { background-color: white; position: fixed; left: 0; right: 0; top: 0; bottom: 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .__SETUP_LOADING__ .setup-spinner { display: inline-block; width: 24px; height: 24px; -webkit-transform-origin: 50%; transform-origin: 50%; -webkit-animation: spinner-spin 1s step-end infinite; animation: spinner-spin 1s step-end infinite; } .__SETUP_LOADING__ .setup-spinner:after { display: block; width: 100%; height: 100%; content: ''; background-image: url('data:image/svg+xml;charset=utf-8,<svg viewBox=\'0 0 120 120\' xmlns=\'http://www.w3.org/2000/svg\' xmlns:xlink=\'http://www.w3.org/1999/xlink\'><defs><line id=\'l\' x1=\'60\' x2=\'60\' y1=\'7\' y2=\'27\' stroke=\'%236c6c6c\' stroke-width=\'11\' stroke-linecap=\'round\'/></defs><g><use xlink:href=\'%23l\' opacity=\'.27\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(30 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(60 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(90 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(120 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.27\' transform=\'rotate(150 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.37\' transform=\'rotate(180 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.46\' transform=\'rotate(210 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.56\' transform=\'rotate(240 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.66\' transform=\'rotate(270 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.75\' transform=\'rotate(300 60,60)\'/><use xlink:href=\'%23l\' opacity=\'.85\' transform=\'rotate(330 60,60)\'/></g></svg>'); background-repeat: no-repeat; background-position: 50%; background-size: 100%; } .__SETUP_LOADING__>span { padding-left: 10px; font-size: 14px; color: #666; } @-webkit-keyframes spinner-spin { 0% { -webkit-transform: rotate(0deg); } 8.33333333% { -webkit-transform: rotate(30deg); } 16.66666667% { -webkit-transform: rotate(60deg); } 25% { -webkit-transform: rotate(90deg); } 33.33333333% { -webkit-transform: rotate(120deg); } 41.66666667% { -webkit-transform: rotate(150deg); } 50% { -webkit-transform: rotate(180deg); } 58.33333333% { -webkit-transform: rotate(210deg); } 66.66666667% { -webkit-transform: rotate(240deg); } 75% { -webkit-transform: rotate(270deg); } 83.33333333% { -webkit-transform: rotate(300deg); } 91.66666667% { -webkit-transform: rotate(330deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spinner-spin { 0% { transform: rotate(0deg); } 8.33333333% { transform: rotate(30deg); } 16.66666667% { transform: rotate(60deg); } 25% { transform: rotate(90deg); } 33.33333333% { transform: rotate(120deg); } 41.66666667% { transform: rotate(150deg); } 50% { transform: rotate(180deg); } 58.33333333% { transform: rotate(210deg); } 66.66666667% { transform: rotate(240deg); } 75% { transform: rotate(270deg); } 83.33333333% { transform: rotate(300deg); } 91.66666667% { transform: rotate(330deg); } 100% { transform: rotate(360deg); } }