kanban-loading

by imys

HTML

<div class="loading-box">
  <div class="kanban-loading">
    <div class="head"></div>
    <div class="content">
      <div class="col">
        <div class="col-inner col-1"></div>
      </div>
      <div class="col">
        <div class="col-inner col-2"></div>
      </div>
      <div class="col">
        <div class="col-inner col-3"></div>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.kanban-loading {
  position: relative;
  margin: auto;
  width: 100px;
  transform: scale(1);
}

.kanban-loading .head {
  height : 12px;
  border : 3px solid #2F7BC1;
}

.kanban-loading .content {
  height : 70px;
  border : 3px solid #2F7BC1;
  border-top : 0;
  padding : 6px 4px;
  display: flex;
}

.kanban-loading .col {
  flex: 1 1 auto;
  padding: 0 4px;
}

.kanban-loading .col-inner {
  border : 3px solid #2F7BC1;
  opacity: 0;
  transform-origin: top center;
  animation : flexcol 3s infinite ease-in-out;
}

.kanban-loading .col-1 {
  height: 100%;
}
.kanban-loading .col-2 {
  height: 60%;
  animation-delay: 1s;
}
.kanban-loading .col-3 {
  height: 40%;
  animation-delay: 2s;
}

@keyframes flexcol {
  0% { transform: scaleY(0); opacity: 0; }
  33.3333% { transform: scaleY(1); opacity : 1; }
  66.6666% { transform: scaleY(0); opacity : 0; }
  100% { opacity : 0; }
}

.loading-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    background: #fff;
    display: flex;
    align-items: center
}