CodePen Embed - jenga loader

#app
  svg(viewBox="0 0 129 109", v-for="block in blocks", :style="{top: block.y + 'px', left: block.x + 'px'}")
    g(:fill="block.color", v-if="block.d === 'left'")
      path(d="M2 62 L102 2 L127 17 L27 77 Z", stroke-width="2", stroke="#000000")
      path(d="M2 62 L27 77 L27 107 L2 92 Z", stroke-width="2", stroke="#000000")
      path(d="M127 17 L27 77 L27 107 L127 47 Z", stroke-width="2", stroke="#000000")
    g(:fill="block.color", v-if="block.d === 'right'")
      path(d="M127 62 L102 77 L2 17 L27 2 Z", stroke-width="2", stroke="#000000")
      path(d="M127 62 L102 77 L102 107 L127 92 Z", stroke-width="2", stroke="#000000")
      path(d="M102 77 L102 107 L2 47 L2 17 Z", stroke-width="2", stroke="#000000")

View Compiled

#app
  position: absolute
  top: 50%
  left: 50%
  transform: translate(-50%, -50%)
  height: 244px
  width: 204px
  
svg
  position: absolute
  top: 0
  left: 0
  width: 130px
  animation: 8000ms ease-in-out infinite
  opacity: 0
  
  &:nth-child(1)
    animation-name: movement-2
  &:nth-child(2)
    animation-name: movement-12
  &:nth-child(3)
    animation-name: movement-1
  &:nth-child(4)
    animation-name: movement-9
  &:nth-child(5)
    animation-name: movement-3
  &:nth-child(6)
    animation-name: movement-11
  &:nth-child(7)
    animation-name: movement-16
  &:nth-child(8)
    animation-name: movement-4
  &:nth-child(9)
    animation-name: movement-7
  &:nth-child(10)
    animation-name: movement-6
  &:nth-child(11)
    animation-name: movement-14
  &:nth-child(12)
    animation-name: movement-5
  &:nth-child(13)
    animation-name: movement-10
  &:nth-child(14)
    animation-name: movement-15
  &:nth-child(15)
    animation-name: movement-13
  &:nth-child(16)
    animation-name: movement-8
  
@keyframes movement-1
  0%
    opacity: 0
    transform: translate(-140%, -100%)
  5.55%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, 100%)

@keyframes movement-2
  5.55%
    opacity: 0
    transform: translate(-140%, -100%)
  11.1%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, 100%)

@keyframes movement-3
  11.1%
    opacity: 0
    transform: translate(140%, -100%)
  16.65%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, 100%)

@keyframes movement-4
  16.65%
    opacity: 0
    transform: translate(-140%, 100%)
  22.2%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, -100%)

@keyframes movement-5
  22.2%
    opacity: 0
    transform: translate(-140%, -100%)
  27.75%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, 100%)

@keyframes movement-6
  27.75%
    opacity: 0
    transform: translate(-140%, -100%)
  33.3%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, 100%)

@keyframes movement-7
  33.3%
    opacity: 0
    transform: translate(140%, 100%)
  38.85%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, -100%)

@keyframes movement-8
  38.85%
    opacity: 0
    transform: translate(140%, -100%)
  44.4%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, 100%)

@keyframes movement-9
  44.4%
    opacity: 0
    transform: translate(140%, 100%)
  49.95%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, -100%)

@keyframes movement-10
  49.95%
    opacity: 0
    transform: translate(-140%, 100%)
  55.5%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, -100%)

@keyframes movement-11
  55.5%
    opacity: 0
    transform: translate(-140%, 100%)
  61.05%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, -100%)

@keyframes movement-12
  61.05%
    opacity: 0
    transform: translate(140%, 100%)
  66.6%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, -100%)

@keyframes movement-13
  66.6%
    opacity: 0
    transform: translate(-140%, 100%)
  72.15%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(140%, -100%)

@keyframes movement-14
  72.15%
    opacity: 0
    transform: translate(140%, 100%)
  77.7%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, -100%)

@keyframes movement-15
  77.7%
    opacity: 0
    transform: translate(140%, -100%)
  83.25%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, 100%)

@keyframes movement-16
  83.25%
    opacity: 0
    transform: translate(140%, -100%)
  88.8%
    opacity: 1
    transform: translate(0, 0)
  90%
    opacity: 1
    transform: translate(0, 0)
  100%
    opacity: 0
    transform: translate(-140%, 100%)

View Compiled

let red = 'rgb(198, 71, 59)'
let blue = 'rgb(67, 142, 151)'
let yellow = 'rgb(220, 159, 58)'
let pale = 'rgb(223, 233, 199)'

window.APP = new Vue({
  el: '#app',
  
  data: {
    blocks: [
      {
        color: yellow,
        x: 75,
        y: 90,
        d: 'right'
      },
      {
        color: blue,
        x: 50,
        y: 105,
        d: 'right'
      },
      {
        color: red,
        x: 25,
        y: 120,
        d: 'right'
      },
      {
        color: pale,
        x: 0,
        y: 135,
        d: 'right'
      },
      {
        color: blue,
        x: 0,
        y: 60,
        d: 'left'
      },
      {
        color: red,
        x: 25,
        y: 75,
        d: 'left'
      },
      {
        color: pale,
        x: 50,
        y: 90,
        d: 'left'
      },
      {
        color: yellow,
        x: 75,
        y: 105,
        d: 'left'
      },
      {
        color: red,
        x: 75,
        y: 30,
        d: 'right'
      },
      {
        color: pale,
        x: 50,
        y: 45,
        d: 'right'
      },
      {
        color: yellow,
        x: 25,
        y: 60,
        d: 'right'
      },
      {
        color: blue,
        x: 0,
        y: 75,
        d: 'right'
      },
      {
        color: pale,
        x: 0,
        y: 0,
        d: 'left'
      },
      {
        color: yellow,
        x: 25,
        y: 15,
        d: 'left'
      },
      {
        color: blue,
        x: 50,
        y: 30,
        d: 'left'
      },
      {
        color: red,
        x: 75,
        y: 45,
        d: 'left'
      },
      
    ]  
  },
  
  mounted () {
  }
})

Run Pen

This Pen is owned by weixhen on CodePen.

See more by @owx940810 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js