eslilo 3d clear

by jpeter06

HTML

<div class="container">
  <div class="top">
  <p>

  </p>
  <p>

  </p>
  </div>
  <div class="center">
  <span class="cargando">
  </span>
  </div>
  <div class="bottom">
  <p>

  </p>
  </div>
</div>

CSS

html, body{
  width:100%;
  height:100%;
  padding:0px;
  margin:0px;
  background:#eee;
  display:flex;
}

.container{
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.top{
  background:#eff4fd;
  flex-grow:0;
  display:flex;
  justify-content:space-between;
}
.center{
  background:#eff4fd;
  flex-grow:1;
  display:flex;
  position:relative;
}
.bottom{
  background:#eff4fd;
  flex-grow:0;
  margin:5px;
}

p{
  margin:13px;
  padding:4px;
  background:#f2f5fc;
  box-shadow:2px 2px 4px 2px #cfd6e3, -2px -2px 4px 2px #fff;

  border-radius: 13px;
  width:18px;
  height:18px;
}

span{
  margin:13px;
  padding:14px;
  background:#f2f5fc;
  box-shadow:2px 2px 4px 2px #cfd6e3, -2px -2px 4px 2px #fff;

  border-radius: 43px;
  width:24px;
  height:24px;
  position:relative;
}

.cargando:after {
  position:absolute;
  --radius: 34px;
  --color: #fa0;
  top:50%;
  left:50%;
  margin-top: calc( 0px - (var(--radius) / 2));
  margin-left: calc( 0px - (var(--radius) / 2));
  text-align:center;
  content: "";
  display: inline-block;
  width: var(--radius);
  height: var(--radius);
  border-radius: 50%;
  border: calc(var(--radius) / 7) solid var(--color);
  border-color: var(--color) transparent var(--color) transparent;
  animation: rotate360 2.2s linear infinite;
  z-index:2;
}

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