.wrapper.center
  - for(var i = 0; i < 6; i++) {
    .slice
      .tomato
      .tomato
      .olive
  - }

.wrapper {
  width: 100px;
  height: 100px;

  .slice {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 35px solid #FEFCC6;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
    
    z-index: 10;
    &:before {
      content: '';
      position: absolute;
      left: -15px;
      top: -45px;
      
      width: 30px;
      height: 15px;
      background: #FEFCC6;
      border-radius: 100%;
      border-top: 5px solid #E57A19;
      z-index: -1;
    }
    
    .tomato {
      background: #A30000;
      position: absolute;
      
      border-radius: 100%;
      
      &:nth-child(1) {
        width: 10px;
        height: 10px;
        top: -37px;
        left: 1px;
      }
      
      &:nth-child(2) {
        width: 7px;
        height: 7px;
        top: -25px;
        left: -7px;
      }
    }
    
    .olive {
      background: #A30000;
      position: absolute;
      
      border-radius: 100%;
      
      &:nth-child(3) {
        width: 4px;
        height: 4px;
        top: -14px;
        left: -1px;
      }
    }
  }
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@for $i from 1 through 6 {
  .slice:nth-child(#{$i}) {
    animation-name: slide-in-#{$i};
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
    animation-delay: $i * .2s;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
  
  @keyframes slide-in-#{$i} {
    from {
      transform: translateX(-50%) rotate($i * 60deg) translateY(-30px);
      visibility: visible;
    }
    to {
      transform: translateX(-50%) rotate($i * 60deg) translateY(-15px);
      visibility: visible;
    }
  }
}