.rainbow
  - let b = 0
  while b < 7
    .rainbow__band(style=`--index: ${b};`)
    -- b++
View Compiled
@property --hue
  initial-value 0
  inherits false
  syntax '<number>'

*
  box-sizing border-box
  
body
  min-height 100vh
  display grid
  place-items center
  background hsl(210, 80%, 90%)
  
.rainbow
  height 25vmin
  width 50vmin
  position relative
  overflow hidden
  
  &__band
    --size calc((50 - (var(--index, 0) * 4)) * 1vmin)
    height 50vmin
    width 50vmin
    border-radius 50%
    position absolute
    top 100%
    left 50%
    border-width 2vmin
    border-color 'hsl(%s, 80%, 50%)' % var(--hue)
    border-style solid
    transform translate(-50%, -50%)
    height var(--size)
    width var(--size)
    animation rainbow 2s calc(var(--index, 0) * -0.2s) infinite linear
    
      
@keyframes rainbow
  to
    --hue 360
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.