.loadbox {height:200px;}

@-webkit-keyframes square-to-circle {
  0%{
    border-radius: 0 0 0 0;
    -webkit-transform: rotate(0deg);
    background:coral;
  }
  12.5%{
    border-radius: 50% 0 0 0;
    -webkit-transform: rotate(45deg);
    background:darksalmon;
  }
  25%{
    border-radius: 50% 50% 0 0;
    -webkit-transform: rotate(90deg);
    background:indianred;
  }
  37.5%{
    border-radius: 50% 50% 50% 0;
    -webkit-transform: rotate(135deg);
    background:lightcoral;
  }
  50%{
    border-radius: 50%;
    -webkit-transform: rotate(180deg);
    background:darksalmon;
  }
  62.5%{
    border-radius: 0 50% 50% 50%;
    -webkit-transform: rotate(225deg);
    background:lightcoral;
  }
  75%{
    border-radius: 0 0 50% 50%;
    -webkit-transform: rotate(270deg);
    background:indianred;
  }
  87.5%{
    border-radius: 0 0 0 50%;
    -webkit-transform: rotate(315deg);
    background:darksalmon;
  }
  100%{
    border-radius: 0;
    -webkit-transform: rotate(360deg);
    background:coral;
  }
}
@keyframes square-to-circle {
  0%{
    border-radius: 0 0 0 0;
    transform: rotate(0deg);
    background:coral;
  }
  12.5%{
    border-radius: 50% 0 0 0;
    transform: rotate(45deg);
    background:darksalmon;
  }
  25%{
    border-radius: 50% 50% 0 0;
    transform: rotate(90deg);
    background:indianred;
  }
  37.5%{
    border-radius: 50% 50% 50% 0;
    transform: rotate(135deg);
    background:lightcoral;
  }
  50%{
    border-radius: 50%;
    transform: rotate(180deg);
    background:darksalmon;
  }
  62.5%{
    border-radius: 0 50% 50% 50%;
    transform: rotate(225deg);
    background:lightcoral;
  }
  75%{
    border-radius: 0 0 50% 50%;
    transform: rotate(270deg);
    background:indianred;
  }
  87.5%{
    border-radius: 0 0 0 50%;
    transform: rotate(315deg);
    background:darksalmon;
  }
  100%{
    border-radius: 0;
    transform: rotate(360deg);
    background:coral;
  }
}

.loading_string {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 22px;
  color: #FFF;
  text-shadow: 0.5px 1px 2px rgba(0,0,0,0.35);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.box-circle-transform{
  display: inline-block;
  width: 150px;
  height: 150px;
  background-color: #373737;
  outline: 1px solid transparent;
  -webkit-animation: square-to-circle 4s 1s infinite cubic-bezier(1,.015,.295,1.225);
  -moz-animation: square-to-circle 4s 1s infinite cubic-bezier(1,.015,.295,1.225);
  -ms-animation: square-to-circle 4s 1s infinite cubic-bezier(1,.015,.295,1.225);
  -o-animation: square-to-circle 4s 1s infinite cubic-bezier(1,.015,.295,1.225);
  animation: square-to-circle 4s 1s infinite cubic-bezier(1,.015,.295,1.225);
  
  background: #4A4A4A;
  position: absolute;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
}