@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); -webkit-transform-origin: 50% 50%; }
    100% { -webkit-transform: rotate(360deg); -webkit-transform-origin: 50% 50%; }
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg); -ms-transform-origin: 50% 50%; }
    100% { -ms-transform: rotate(360deg); -ms-transform-origin: 50% 50%; }
}
@keyframes spin {
    0% { transform: rotate(0deg); transform-origin: 50% 50%; }
    100% { transform: rotate(360deg); transform-origin: 50% 50%; }
}

.doublespinner, .singlespinner {
	position: relative;
	top:calc(50% - 18px);
    left: calc(50% - 18px);
    width: 36px;
	height: 36px;
}
.doublespinner .outer {
	position: absolute;
	width: 36px;
	height: 36px;
	top: 0;
    left: 0;
	border: 3px solid blue;
    border-radius: 100%;
    clip:rect(0px 21px 21px 0px);
    -webkit-animation: spin 2s infinite linear;
    -ms-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}
.doublespinner .inner {
	position: absolute;
	width: 26px;
	height: 26px;
	top: 5px;
    left: 5px;
	border: 3px solid blue;
    border-radius: 100%;
    clip:rect(0px 16px 16px 0px);
    -webkit-animation: spin 1s infinite linear reverse;
    -ms-animation: spin 1s infinite linear reverse;
    animation: spin 1s infinite linear reverse;
}

.singlespinner div {
	position: absolute;
	top: 0;
    left: 0;
    width: 26px;
	height: 26px;
	border: 3px solid blue;
	border-radius: 100%;
    clip:rect(0px 16px 16px 0px);
    -webkit-animation: spin 1s infinite linear reverse;
    -ms-animation: spin 1s infinite linear reverse;
    animation: spin 1s infinite linear reverse;
}

/* spinner */
.loader {
    text-align: center;
}
.loader .spinner {
    -webkit-animation: spin 1s infinite linear;
    -moz-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
    font-size: 34px;
    line-height: 34px;
    display: inline-block;
    color: black;
    padding: 0;
    width: 40px;
    height: 40px;
}