span.jsit-loading, 
span.jsit-loading-complete {
	position: relative;
	top: 2px;
}

.jsit-loading {
	display: inline-block;
	width: 14px;
	height: 14px;
	
	animation: jsit-rotate-loading 1.5s linear 0s infinite normal;
	border-width: 3px;
	border-style: solid;
	border-radius: 100%;
	border-color: #fff #fff #fff rgba(0,0,0,0);
}

.jsit-dark .jsit-loading,
.jsit-loading.dark {
	border-color: #000 #000 #000 rgba(0,0,0,0);
}

@keyframes jsit-rotate-loading {
	0% {
		transform:rotate(0deg)
	}
	100% {
		transform:rotate(360deg)
	}
}


.jsit-loading-complete {
	-webkit-animation: none;
  animation: none;
  border: none;
  transition: border 500ms ease-out;
	position: relative;
}

.checkmark {
  display: none;
}
.jsit-loading-complete .checkmark {
	display: block;
}
.checkmark.draw:after {
	animation-duration: 800ms;
	animation-timing-function: ease;
	animation-name: checkmark;
	transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
	display: inline-block;
	border: 3px solid #0000;
	opacity: 1;
	height: 16px;
	width: 8px;
	transform-origin: left top;
	border-right: 3px solid #fff;
	border-top: 3px solid #fff;
	content: '';
	left: -2px;
	top: 6px;
	position: absolute;
}


.jsit-dark .jsit-loading .checkmark:after,
.jsit-loading.dark .checkmark:after {
	border-right: 3px solid #000;
	border-top: 3px solid #000;
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }
  20% {
    height: 0;
    width: 8px;
    opacity: 1;
  }
  40% {
    height: 16px;
    width: 8px;
    opacity: 1;
  }
  100% {
    height: 16px;
    width: 8px;
    opacity: 1;
  }
}