﻿/*.icon-spin{background:url(loading.gif) no-repeat 0 0; width:35px; height:35px; top:50%; left:50%; transform:translate(-50%,-50%); display:block; position:absolute}*/
/*.icon-spin{width: 100%;
  height: 6px;
  background-color: #fdba2c;
  top:50%; left:50%; transform:translate(-50%,-50%); display:block; position:absolute
}
.load-bar{content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;}
.load-bar:nth-child(1) {
  background-color: #da4733;
  animation: loading 3s linear infinite;
}
.load-bar:nth-child(2) {
  background-color: #3b78e7;
  animation: loading 3s linear 1s infinite;
}
.load-bar:nth-child(3) {
  background-color: #fdba2c;
  animation: loading 3s linear 2s infinite;
}
@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
    33.3333% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;lis}
}*/
.icon-spin{
	background-color:#ddd;
    height:4px; width:480px; overflow:hidden; 
    top:50%; left:50%; transform:translate(-50%,-50%); display:block; position:absolute
}
.icon-spin:before{
	content:'';
	position:absolute;
	background-color:#2980b9;
	top:0;
	left:0;
	bottom:0;
	will-change:left, right;
	-webkit-animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
	animation:indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite
}
.icon-spin:after{
	content:'';
	position:absolute;
	background-color:#2980b9;
	top:0;
	left:0;
	bottom:0;
	will-change:left, right;
	-webkit-animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	animation:indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
	-webkit-animation-delay:1.15s;
	animation-delay:1.15s
}
@-webkit-keyframes indeterminate{
	0%{
		left:-35%;
		right:100%
}
	60%{
		left:100%;
		right:-90%
}
	100%{
		left:100%;
		right:-90%
}
}
@keyframes indeterminate{
	0%{
		left:-35%;
		right:100%
}
	60%{
		left:100%;
		right:-90%
}
	100%{
		left:100%;
		right:-90%
}
}
@-webkit-keyframes indeterminate-short{
	0%{
		left:-200%;
		right:100%
}
	60%{
		left:107%;
		right:-8%
}
	100%{
		left:107%;
		right:-8%
}
}
@keyframes indeterminate-short{
	0%{
		left:-200%;
		right:100%
}
	60%{
		left:107%;
		right:-8%
}
	100%{
		left:107%;
		right:-8%
}