.load-loader {
  height: 100px;
  width: 79px;
  left: calc(50% - 38px);
  top: calc(50% - 165px);
  position: relative;
}

.loader__bar{
position: absolute;
bottom: 0;
left: calc((var(--line-index) - 1) * 15px);
width: 10px;
height: 50px;
background:  #09f;
transform-origin: center bottom;
box-shadow: 1px 1px 0 rgba(0,0,0,.2);
animation: bar 4s infinite;
} 

.loader__ball {
position: absolute;
bottom: 10px;
left: 0;
width: 10px;
height: 10px;
background: rgb(0, 225, 255);
border-radius: 50%;
animation: ball 4s infinite;
}
.load-mask{
position: fixed;
background: white;
left: 0;
right: 0;
bottom: 0;
top: 0;
}
.load-tips-text{
  position: absolute;
  bottom: -70px;
  width: 252px;
  left: -90px;
  color: #09f
  
}
.load-tips-text-dong{
  text-align: center;
  font-size: 0;
}
.load-tips-text-dong span{
  display: inline-block;
  font-size: 16px;
  animation-name: myani;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease;
  animation-direction: alternate;
  animation-fill-mode: both;
}
.load-tips-text-dong span:nth-child(1) {
  animation-delay: 0.1s;
}
.load-tips-text-dong span:nth-child(2) {
  animation-delay: 0.2s;
}
.load-tips-text-dong span:nth-child(3) {
  animation-delay: 0.3s;
}
.load-tips-text-dong span:nth-child(4) {
  animation-delay: 0.4s;
}
.load-tips-text-dong span:nth-child(5) {
  animation-delay: 0.5s;
}
.load-tips-text-dong span:nth-child(6) {
  animation-delay: 0.6s;
}
.load-tips-text-small{
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 15px;
  font-size: 13px;
}
@keyframes myani {
  0%, 100% {
      padding-bottom: 0;
  }
  50% {
      transform: translateY(-5px);
  }
}
@keyframes ball {
0%,100% {
transform: translate(0, 0);
}
5% {
transform: translate(8px, -14px);
}
10% {
transform: translate(15px, -10px)
}
17% {
transform: translate(23px, -24px)
}
20% {
transform: translate(30px, -20px)
}
27% {
transform: translate(38px, -24px)
}
30% {
transform: translate(45px, -10px)
}
37% {
transform: translate(53px, -14px)
}
40%, 50% {
transform: translate(60px, 0)
}
57% {
transform: translate(53px, -14px)
}
60% {
transform: translate(45px, -10px)
}
67% {
transform: translate(37px, -24px)
}
70% {
transform: translate(30px, -20px)
}
77% {
transform: translate(22px, -24px)
}
80% {
transform: translate(15px, -10px)
}
87% {
transform: translate(7px, -14px)
}
90% {
transform: translate(0, 0px)
}
}

@keyframes bar { 
0%,100%{
transform: scaleY(calc(var(--line-index) * 0.2));
}
50%{
transform: scaleY(calc((6 - var(--line-index)) * 0.2));
}
}