html,
body {
	margin: 0;
}

.loading-mask {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: #dedede;
}

.loading-mask .big-circle {
	width: 64px;
	height: 64px;
	position: absolute;
    top: calc(50% - 32px);
    left: calc(50% - 32px);
}

.loading-mask .small-circle {
	width: 108px;
	height: 108px;
	position: absolute;
    top: calc(50% - 54px);
    left: calc(50% - 54px);

    -webkit-animation:spin 2s ease-in-out infinite;
    -moz-animation:spin 2s ease-in-out infinite;
    animation:spin 2s ease-in-out infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.loading-mask .cls-1{fill:#682b7b;}
.loading-mask .cls-2{fill:none;stroke:#682b7b;stroke-miterlimit:10;stroke-width:2px;}
.loading-mask .cls-3{fill:#8781bd;}
.loading-mask .cls-4{fill:none;stroke:#8781bd;stroke-miterlimit:10;}