#container
  - (1..12).each do
    .dot
View Compiled
@import bourbon

$dots: 10
$duration: 1

html
  height: 100%
  @include linear-gradient(#444, #222)
    
#container
  margin: 8em auto
  width: 0.45em
  height: 0.95em
  position: relative
  
@for $i from 1 through $dots
  .dot:nth-of-type(#{$i})
    width: 100%
    height: 100%
    border-radius: 3px
    background: #f57df5
    box-shadow: 0 0 1em 0.13em #Ae52ce
    position: absolute
    opacity: 1
    @include transform(rotate($i * 360 / $dots + deg) translateX(2em))
    @include animation(bigger $duration + s $i* $duration / $dots +s linear infinite)
      
  @include keyframes(bigger)
    from
      opacity: 0
    to
      opacity: 1
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.