Loader - funky

index.html

<div class="center">
  <div class="circle-wrapper">
    <span class="circle circle-left"></span>
    <span class="circle circle-right"></span>
  </div>
</div>

Loader - funky.markdown

Loader - funky

A Pen by Ganapati V S on CodePen.

License.

style.stylus

//C-color, F-font
FsourceSans= 'Source Sans Pro', sans-serif;

Corange=#f26c4f  //Orange color - Arya core color
Cblue=#2b4c7e  //Blue color - Links and Action color
Cgreen=#0b8185  //Green color - Major Titles and Action color
Cyellow=#f2c45a  //Yellow color - User interaction and user area color
Cpurple=#452b72  //Purple color - Borders, seperators, Title color
Clightgreen=#0de5a8  //Light green color - Alternate color and minimal usage

/*White variant colors*/
Cff=#fff
Cfc=#fcfcfc
Cfa=#fafafa
Cf1=#f1f1f1
Cf5=#f5f5f5
Ceee=#eee
Cddd=#ddd
Cccc=#ccc
Caaa=#aaa
C999=#999

anim_func=cubic-bezier(0.650, 0.045, 0.405, 1.000)


//Postions functions example
/*absolute: top 150px left 5px*/
/*fixed: top left*/

-pos(type, args)
  i = 0
  position: unquote(type) !important
  {args[i]}: args[i + 1] is a 'unit' ? args[i += 1]  !important : 0
  {args[i += 1]}: args[i + 1] is a 'unit' ? args[i += 1] !important : 0
absolute()
  -pos('absolute', arguments)

fixed()
  -pos('fixed', arguments)

/*vandor prefixes*/

vendors = webkit moz o ms official

border-radius()
  for vendor in vendors
    if vendor == official
        border-radius: arguments
    else
        -{vendor}-border-radius: arguments


transition()
  for vendor in vendors
    if vendor == official
        transition: arguments
    else
        -{vendor}-transition: arguments


filter()
  for vendor in vendors
    if vendor == official
        filter: arguments
    else
        -{vendor}-filter: arguments


animation()
  for vendor in vendors
    if vendor == official
        animation: arguments
    else
        -{vendor}-animation: arguments

transform()
  for vendor in vendors
    if vendor == official
        transform: arguments
    else
        -{vendor}-transform: arguments


box-shadow()
  for vendor in vendors
    if vendor == official
        box-shadow: arguments
    else
        -{vendor}-box-shadow: arguments
        
        
body, html
  padding 0
  margin 0
  .center
    position fixed
    left 50%
    top 50%
    transform translate(-50%, -50%)
    .circle-wrapper
      width 100px
      height 40px
      position relative
      transform-origin center center
      animation rotate 2.4s anim_func infinite alternate
      .circle
        width 24px
        height 24px
        position absolute
        left 0
        border-radius 50%
        background Cyellow
        display inline-block
        animation slide-right 2.4s anim_func infinite alternate
        &.circle-right
          transform translate3d(70px, 24px, 0)
          animation slide-left 2.4s anim_func infinite alternate
          
@keyframes slide-right {
  33.33% {
    transform translateX(0) scale(1)
  }
  50% {
    transform translateX(35px) scale(0.48)
    border-color Cpurple
    background Clightgreen
  }
  66.66% {
    transform translateX(70px) scale(1)
  }
}  

@keyframes slide-left {
  33.33% {
    transform translateX(70px) translateY(24px) scale(1)
  }
  50% {
    transform translateX(35px) translateY(24px) scale(0.48)
    border-color Cpurple
    background Clightgreen
  }
  66.66% {
    transform translateX(0) translateY(24px) scale(1)
  }
}
    

@keyframes rotate {
  0% {
    transform rotate(180deg)
  }
  50% {
    transform rotate(0)
  }
  100% {
    transform rotate(180deg)
  }
}