#loading-box {
  background-color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
}

#loading-absolute-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translatey(-100%) translatex(-50%);
}


/*杞湀瀛愪腑闂村甫鏂囧瓧, 鍙湅杩欎釜鐩稿叧绫荤殑 */
#caseblanche {
  height : 100px;
  width : 100px;
  position : relative;
  text-align: center;
  line-height: 100px;
  color: #0a82e7;
}



#caseviolette #load {
  color : #d8a6ff;
  text-align : center;
}


@-webkit-keyframes case1 {
  0% {width : 0%;}
  50% {width : 90px;}
  100% {width : 0%;}
}

@keyframes case1 {
  0% {width : 0%;}
  50% {width : 90px;}
  100% {width : 0%;}
}
/****fin case 1****/


@-webkit-keyframes case2 {
  0% {width : 0%;}
  50% {width : 100px;}
  100% {width : 0%;}
}

@keyframes case2 {
  0% {width : 0%;}
  50% {width : 100px;}
  100% {width : 0%;}
}
/****fin case 2****/


@-webkit-keyframes case3 {
  0% {width : 0%;}
  50% {width : 95px;}
  100% {width : 0%;}
}

@keyframes case3 {
  0% {width : 0%;}
  50% {width : 95px;}
  100% {width : 0%;}
}
/****fin case 3****/


@-webkit-keyframes case4 {
  0% {width : 0%;}
  50% {width : 80px;}
  100% {width : 0%;}
}

@keyframes case4 {
  0% {width : 0%;}
  50% {width : 80px;}
  100% {width : 0%;}
}
/****fin case 4****/


@-webkit-keyframes case5 {
  0% {width : 0%;}
  50% {width : 105px;}
  100% {width : 0%;}
}

@keyframes case5 {
  0% {width : 0%;}
  50% {width : 105px;}
  100% {width : 0%;}
}
/****fin case 5****/



@-webkit-keyframes case6 {
  0% {width : 0%;}
  50% {width : 75px;}
  100% {width : 0%;}
}

@keyframes case6 {
  0% {width : 0%;}
  50% {width : 75px;}
  100% {width : 0%;}
}
/****fin case 6****/

/****debut top****/
#top {
  height : 10px;
  width : 10px;
  border-radius : 50%;
  background-color : #ff737a;
  position : absolute;
  top : 10px;
  left : 65px;
  animation : turntop 2s infinite;
  -webkit-animation : turntop 2s infinite;
}

@keyframes turntop {
  0% {top : 10px;}
  50% {top : 40px;}
  100% {top : 10px;}
}

@-webkit-keyframes turntop {
  0% {top : 10px;}
  50% {top : 40px;}
  100% {top : 10px;}
}
/****fin top****/

/****debut left****/
#left {
  height : 10px;
  width : 10px;
  border-radius : 50%;
  background-color : #ff737a;
  position : absolute;
  bottom : 10px;
  left : 10px;
  animation : turnleft 2s infinite;
  -webkit-animation : turnleft 2s infinite;
}

@keyframes turnleft {
  0% {bottom : 10px; left : 10px;}
  50% {bottom : 50px; left : 40px;}
  100% {bottom : 10px; left : 10px;}
}

@-webkit-keyframes turnleft {
  0% {bottom : 10px; left : 10px;}
  50% {bottom : 50px; left : 40px;}
  100% {bottom : 10px; left : 10px;}
}
/****fin left****/

/****debut right****/
#right {
  height : 10px;
  width : 10px;
  border-radius : 50%;
  background-color : #ff737a;
  position : absolute;
  bottom : 10px;
  right : 10px;
  animation : turnright 2s infinite;
  -webkit-animation : turnright 2s infinite;
}

@keyframes turnright {
  0% {bottom : 10px; right : 10px;}
  50% {bottom : 50px; right : 40px;}
  100% {bottom : 10px; right : 10px;}
}

@-webkit-keyframes turnright {
  0% {bottom : 10px; right : 10px;}
  50% {bottom : 50px; right : 40px;}
  100% {bottom : 10px; right : 10px;}
}
/****fin right****/

/****debut boule****/
#boule {
  height : 10px;
  width : 10px;
  position : absolute;
  top : 80px;
  left : 10px;
  background-color : #bf6530;
  border-radius : 50%;
  animation : boule 2s infinite;
  -webkit-animation : boule 2s infinite;
}

@keyframes boule {
  0% {left : 10px;opacity : 0;}
  50% {height : 20px; width : 20px; opacity : 1;}
  100% {left : 120px; opacity : 0; height : 10px; width : 10px;}
}

@-webkit-keyframes boule {
  0% {left : 10px;opacity : 0;}
  50% {height : 20px; width : 20px; opacity : 1;}
  100% {left : 120px; opacity : 0; height : 10px; width : 10px;}
}
/****fin boule****/

/****debut cercle****/
#cercle {
  height : 50px;
  width : 50px;
  position : absolute;
  top : 45px;
  left : 45px;
  border-radius : 50%;
  background : linear-gradient(#d8a6ff,#ffecee);
  animation : turncercle 2s infinite;
  -webkit-animation : turncercle 5s infinite;
  animation-timing-function : ease-in-out;
  -webkit-animation-timing-function : ease-in-out;
}

@-webkit-keyframes turncercle {
  0% {-webkit-transform : rotate(0deg);}
  100% {-webkit-transform : rotate(10080deg);}
}

@keyframes turncercle {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(10080deg);}
}

#cerclecache {
  height : 40px;
  width : 40px;
  position : absolute;
  border-radius : 50%;
  background-color : #592780;
  z-index : 5;
}
/****fin cercle****/

/****debut point****/
#point {
  height : 2px;
  width : 2px;
  position : relative;
  top : -22px;
  left : 96px;
  border-radius : 50%;
  background-color : #d8a6ff;
  animation : point 1.5s infinite;
  -webkit-animation : point 1.5s infinite;
  animation-timing-function : linear;
  -webkit-animation-timing-function : linear;
}

@-webkit-keyframes point {
  0% {left : 96px; opacity : 0;}
  5% {left : 96px; opacity : 1;}
  15% {left : 96px; opacity : 0;}
  30% {left : 99px; opacity : 0;}
  45% {left : 99px; opacity : 1;}
  60% {left : 99px; opacity : 0;}
  75% {left : 102px; opacity : 0;}
  90% {left : 102px; opacity : 1;}
  100% {left : 102px; opacity : 0;}
}

@keyframes point {
  0% {left : 96px; opacity : 0;}
  5% {left : 96px; opacity : 1;}
  15% {left : 96px; opacity : 0;}
  30% {left : 99px; opacity : 0;}
  45% {left : 99px; opacity : 1;}
  60% {left : 99px; opacity : 0;}
  75% {left : 102px; opacity : 0;}
  90% {left : 102px; opacity : 1;}
  100% {left : 102px; opacity : 0;}
}
/****fin point****/

/****debut test****/
#test {
  height : 10px;
  width : 10px;
  position : absolute;
  background-color : #0a82e7;
  border-radius : 50%;
  top : 0px;
  left : 10px;
}

#rond {
  height  : 100px;
  width : 100px;
  border : 1px solid #0a82e7;
  border-radius : 50%;
  position :absolute;
  animation : rond 2s infinite;
  -webkit-animation : rond 2s infinite;
}

@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

@-webkit-keyframes rond {
  0% {-webkit-transform : rotate(0deg);}
  100% {-webkit-transform : rotate(360deg);}
}
/****fin test****/

/****debut vague****/
#vague {
  position : absolute;
  top : 72px;
  left : 20px;
}

#vague1 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague1 2.5s infinite;
  -webkit-animation : vague1 2.5s infinite;
}

@-webkit-keyframes vague1 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague1 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

#vague2 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague2 2.5s infinite;
  -webkit-animation : vague2 2.5s infinite;
  animation-delay : 0.5s;
  -webkit-animation-delay : 0.5s;
}

@-webkit-keyframes vague2 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague2 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

#vague3 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague3 2.5s infinite;
  -webkit-animation : vague3 2.5s infinite;
  animation-delay : 1s;
  -webkit-animation-delay : 1s;
}

@-webkit-keyframes vague3 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague3 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

#vague4 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague4 2.5s infinite;
  -webkit-animation : vague4 2.5s infinite;
  animation-delay : 1.5s;
  -webkit-animation-delay : 1.5s;
}

@-webkit-keyframes vague4 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague4 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

#vague5 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague5 2.5s infinite;
  -webkit-animation : vague5 2.5s infinite;
  animation-delay : 2s;
  -webkit-animation-delay : 2s;
}

@-webkit-keyframes vague5 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague5 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

#vague6 {
  height : 5px;
  width : 5px;
  background-color : #886ed7;
  float : left;
  animation : vague6 2.5s infinite;
  -webkit-animation : vague6 2.5s infinite;
  animation-delay : 2.5s;
  -webkit-animation-delay : 2.5s;
}

@-webkit-keyframes vague6 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}

@keyframes vague6 {
  0% {height : 5px;}
  50% {height : 30px;}
  100% {height : 5px;}
}
/****fin vague****/

/****debut transform****/
#tranform {
  position : absolute;
  top : 85px;
  left : 30px;
}

#transform1 {
  height : 30px;
  width : 30px;
  border-radius : 50%;
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 15px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
}

#transform2 {
  height : 30px;
  width : 30px;
  border-radius : 50%;
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 54px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
  animation-delay : 0.5s;
  -webkit-animation-delay : 0.5s;
}

#transform3 {
  height : 30px;
  width : 30px;
  border-radius : 50%;
  background-color : #444444;
  position : absolute;
  top : 85px;
  left : 94px;
  opacity : 0;
  animation : transform 4s infinite;
  -webkit-animation : transform 4s infinite;
  animation-delay : 1s;
  -webkit-animation-delay : 1s;
}

@-webkit-keyframes transform {
  0% {opacity : 0;}
  25% {opacity : 1;}
  50% {opacity : 0;}
  75% {opacity : 1;}
  100% {opacity : 0;}
}

@keyframes transform {
  0% {border-radius : 0px; opacity : 0;}
  20% {border-radius : 0px; opacity : 1;}
  40% {border-radius : 0px; opacity : 0;}
  60% {border-radius : 50%; opacity : 0;}
  80% {border-radius : 50%; opacity : 1;}
  100% {border-radius : 50%; opacity : 0;}
}
/****fin transform****/

/****debut progress****/
#progress {
  height : 10px;
  width : 120px;
  position : absolute;
  top : 60px;
  left : 10px;
  box-shadow : 0px 0px 10px #111111 inset;
}

#charge {
  height : 10px;
  width : 120px;
  position : absolute;
  top : 0px;
  left : 0px;
  background-color : #c9f76f;
  margin : 0px;
  animation : charge 7s infinite;
  -webkit-animation : charge 7s infinite;
  box-shadow : 0px 0px 5px #222 inset;
}

@-webkit-keyframes charge {
  0% {width : 0px;}
  100% {width : 100%;}
}

@keyframes charge {
  0% {width : 0px;}
  100% {width : 100%;}
}
/****fin progress****/

/****debut spinner****/
#spinner {
  height : 40px;
  width : 40px;
  /*background-color : #61615e;*/
  border : 2px solid #61615e;
  border-left-color : transparent;
  border-right-color : transparent;
  border-radius : 50%;
  animation : spin 2s infinite;
  -webkit-animation : spin 2s infinite;
}

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

@keyframes spin {
  0% {transform : rotate(0deg);}
  50% {transform : rotate(360deg);}
  100% {transform : rotate(0deg);}
}
/****fin spinner****/