.loader

$wf = 1px solid rgba(#fff, .8)
$size = 20vh
$mainbg = #222
$grbg1 = linear-gradient( 135deg, rgba(#FCCF31,1), rgba(#F55555,.95))
$grbg2 = linear-gradient( 135deg, rgba(#E2B0FF,1), rgba(#9F44D3,.95))

html
  background $mainbg
  
.loader
  // border $wf
  position absolute
  width $size
  height $size
  top 50%
  left 50%
  margin-top -($size/2)
  margin-left -($size/2)
  perspective 60vh
  &:before, &:after
    // border $wf
    content " "
    position absolute
    width 100%
    height 100%
    border-radius 50%
  &:before
    left -($size/1.5)
    background $grbg1
    transform translateZ(0vh)
    z-index 1
    animation rotation1 1.5s ease-out infinite
  &:after
    right -($size/1.5)
    background $grbg2
    transform translateZ(0vh)
    z-index 1
    animation rotation2 1.5s ease-out infinite
@keyframes rotation1
  25%
    left 0
    transform translateZ(-10vh)
  50%
    left ($size/1.5)
    transform translateZ(0vh)
  75%
    left 0
    transform translateZ(20vh)
    z-index 2
@keyframes rotation2
  25%
    right 0
    transform translateZ(20vh)
    z-index 2
  50%
    right ($size/1.5)
    transform translateZ(0vh)
  75%
    right 0
    transform translateZ(-10vh)

/*

*/