.radial-timer {
  overflow: hidden;
  height: 144px;
  width: 144px;
  position: relative;
}
.radial-timer .radial-timer-half {
  height: 144px;
  width: 72px;
  border-radius: 72px 0 0 72px;
  background: red;
  position: absolute;
}
.radial-timer .radial-timer-half:nth-of-type(2) {
  z-index: 99999999;
  -webkit-transform-origin: center right;
  -webkit-transform: rotate(180deg);
}
.radial-timer .radial-timer-half:before {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  height: 126px;
  width: 63px;
  border-radius: 67.5px 0 0 67.5px;
  background: rgb(255, 255, 255);
}
.radial-timer .radial-timer-half:after {
  content: "";
  position: absolute;
  background: rgb(255, 255, 255);
  height: 288px;
  width: 216px;
  left: -144px;
  top: -72px;
  -webkit-transform-origin: center right;
}
.radial-timer.s-animate {
  -webkit-transform-origin: center right;
}
.radial-timer.s-animate .radial-timer-half:nth-of-type(1):after {
  -webkit-animation: rotateLeftMask 3s infinite linear;
}
.radial-timer.s-animate .radial-timer-half:nth-of-type(2):after {
  -webkit-animation: rotateRightMask 3s infinite linear;
}

@-webkit-keyframes rotateLeftMask {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
@-webkit-keyframes rotateRightMask {
  0% {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
    visibility: hidden;
  }
  100% {
    -webkit-transform: rotate(180deg);
    visibility: hidden;
  }
}