animated pie css only

HTML

<div class="wrapper">
  <div class="spinner pie"></div>
  <div class="filler pie"></div>
  <div class="mask"></div>
</div>

CSS

.wrapper {
  width: 250px;
  height: 250px;
  position: relative;
  background: white;
  box-sizing: border-box;
}

.wrapper * {
  box-sizing: border-box;
}

.pie {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: hotpink;
  border: 10px solid rgba(0,0,0,0.2);
}

.spinner {
  border-radius: 125px 0 0 125px;
  z-index: 200;
  border-right: none;
  animation: rota 5s linear normal;
}

.filler {
  border-radius: 0 125px 125px 0;
  z-index: 100;
  border-left: none;
  animation: fill 5s steps(1, end) normal;
  left: 50%;
  opacity: 0;
}

.mask {
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 300;
  opacity: 1;
  background: inherit;
  animation: mask 5s steps(1, end) normal;
}

@keyframes rota {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(70deg); }
}

@keyframes fill {
  0%        { opacity: 1; }
  50%, 100% { opacity: 1; }
}

@keyframes mask {
  0%        { opacity: 1; }
  50%, 100% { opacity: 0; }
}