
.spin-cell{
	position: absolute;
	color: #191919;
	top: 0;
	left: 0;
	width: 20px;
	height: 50px;
	/* border-radius: 50%; */
}

/* .spin-cell-1 {

} */


@keyframes spin {
	to { transform: rotate(1turn); }
}

.spinner {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	margin: 0 .5em;
	font-size: 12px;
	text-indent: 999em;
	overflow: hidden;
	animation: spin 1s infinite steps(12);
}

.small.spinner {
	font-size: 6px;
}

.large.spinner {
	font-size: 24px;
}

.spinner:before,
.spinner:after,
.spinner > div:before,
.spinner > div:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2.25em; /* (container width - part width)/2  */
	width: .5em;
	height: 1.5em;
	border-radius: .2em;
	background: #eee;
	box-shadow: 0 3.5em #eee; /* container height - part height */
	transform-origin: 50% 2.5em; /* container height / 2 */
}

.spinner:before {
	background: #555;
}

.spinner:after {
	transform: rotate(-45deg);
	background: #777;
}

.spinner > div:before {
	transform: rotate(-90deg);
	background: #999;
}

.spinner > div:after {
	transform: rotate(-135deg);
	background: #bbb;
}



.lds-spinner {
	transform: scale(0.3);
	color: official;
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
  }
  .lds-spinner div {
	transform-origin: 40px 40px;
	animation: lds-spinner 1.2s linear infinite;
  }
  .lds-spinner div:after {
	content: " ";
	display: block;
	position: absolute;
	top: 3px;
	left: 37px;
	width: 8px;
	height: 20px;
	border-radius: 45px;
	background: #191919;
  }
  .lds-spinner div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -1.1s;
  }
  .lds-spinner div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -1s;
  }
  .lds-spinner div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.9s;
  }
  .lds-spinner div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.8s;
  }
  .lds-spinner div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.7s;
  }
  .lds-spinner div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.6s;
  }
  .lds-spinner div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.5s;
  }
  .lds-spinner div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.4s;
  }
  .lds-spinner div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.3s;
  }
  .lds-spinner div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.2s;
  }
  .lds-spinner div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.1s;
  }
  .lds-spinner div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
  }
  @keyframes lds-spinner {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }