Expand-contract loader animation

Expand-contract loader animation.markdown

Expand-contract loader animation

A quick experiment illustrating the use of same expand/contract animation but with a variety of rotation angles.

The end result is a synchronized 4 way animation

A Pen by Antonio Pavlinović on CodePen.

License.

index.html

.top
  .square
    .square
      .square
        .square
          .square
            .square
              .square
                .square

.bottom
  .square
    .square
      .square
        .square
          .square
            .square
              .square
                .square
            
.original
  .square
    .square
      .square
        .square
          .square
            .square
              .square
                .square

.reverse
  .square
    .square
      .square
        .square
          .square
            .square
              .square
                .square

style.css

body 
{
  overflow: hidden;
  background: #222;
}

.square 
{
  width: 6px;
  height: 23px;
  border-radius: 9px;
  background: rgba(0, 255, 255, 1);
  display: block;  
  margin: 13px;  
  animation: moveAround 2.1s ease infinite;
}


.original 
{
  position: absolute;
  top: 35%;
  left: 50%;
}

.reverse 
{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: rotate(180deg);
}


.reverse .square
{
  background: rgba(30, 255, 110, 1);
}


.top 
{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: rotate(-90deg);  
}

.top .square
{
  background: rgba(255, 0, 0, 1);
}

.bottom 
{
  position: absolute;
  top: 35%;
  left: 50%;
  transform: rotate(90deg);
}

.bottom .square
{
  background: rgba(255, 255, 0, 1);
}

@keyframes moveAround 
{
  0% { transform: translateX(0); }  
  35% { transform: translateX(400%) translateY(0%) rotate(0deg); }
  50% { transform: translateX(500%) translateY(50%) rotate(45deg); }
  85% { transform: translateX(30%) translateY(-50%) rotate(45deg); }
  100% { transform: translateX(0%) translateY(0%) rotate(0deg); }
}