Fancy Color Orb with Mix-Blend-Modes
HAML
.loader
- (1..50).each do
%div
.mixer
SASS
$c1: #222
$c2: #ce8147
$dim: 200px
$t: 8s
$d: $t / 200
@keyframes loader
50%
transform: rotate(180deg)
body
margin: 0
background-color: $c1
.loader, .mixer
height: $dim
width: $dim
position: relative
top: 50vh
margin: -$dim/2 auto
border-radius: 50%
overflow: hidden
transform: rotate(45deg)
.loader > div
width: $dim/50
height: $dim*2
margin: -$dim/2 0 0 0
float: left
animation: loader $t infinite
filter: blur(2px)
mix-blend-mode: overlay
@for $i from 1 through 100
.loader > div:nth-child(#{$i})
background-color: adjust-hue($c2,$i*6)
animation-delay: $i * $d
.mixer
border: 1px solid white
margin: -$dim auto
background-color: #fff
mix-blend-mode: overlay
transform: scale(0.5)
