uni-load-more.wxss 2.1 KB

123
  1. .uni-load-more{display:flex;flex-direction:row;height:80rpx;align-items:center;justify-content:center}.uni-load-more__text{font-size:28rpx;color:#999}.uni-load-more__img{height:24px;width:24px;margin-right:10px}.uni-load-more__img>.load{position:absolute}.uni-load-more__img>.load .item{width:6px;height:2px;border-top-left-radius:1px;border-bottom-left-radius:1px;background:#999;position:absolute;opacity:.2;-webkit-transform-origin:50%;transform-origin:50%;-webkit-animation:load 1.56s ease infinite;animation:load 1.56s ease infinite}.uni-load-more__img>.load .item:nth-child(1){-webkit-transform:rotate(90deg);transform:rotate(90deg);top:2px;left:9px}.uni-load-more__img>.load .item:nth-child(2){-webkit-transform:rotate(180deg);transform:rotate(180deg);top:11px;right:0}.uni-load-more__img>.load .item:nth-child(3){-webkit-transform:rotate(270deg);transform:rotate(270deg);bottom:2px;left:9px}.uni-load-more__img>.load .item:nth-child(4){top:11px;left:0}.load1,
  2. .load2,
  3. .load3{height:24px;width:24px}.load2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.load3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.load1 .item:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s}.load2 .item:nth-child(1){-webkit-animation-delay:.13s;animation-delay:.13s}.load3 .item:nth-child(1){-webkit-animation-delay:.26s;animation-delay:.26s}.load1 .item:nth-child(2){-webkit-animation-delay:.39s;animation-delay:.39s}.load2 .item:nth-child(2){-webkit-animation-delay:.52s;animation-delay:.52s}.load3 .item:nth-child(2){-webkit-animation-delay:.65s;animation-delay:.65s}.load1 .item:nth-child(3){-webkit-animation-delay:.78s;animation-delay:.78s}.load2 .item:nth-child(3){-webkit-animation-delay:.91s;animation-delay:.91s}.load3 .item:nth-child(3){-webkit-animation-delay:1.04s;animation-delay:1.04s}.load1 .item:nth-child(4){-webkit-animation-delay:1.17s;animation-delay:1.17s}.load2 .item:nth-child(4){-webkit-animation-delay:1.3s;animation-delay:1.3s}.load3 .item:nth-child(4){-webkit-animation-delay:1.43s;animation-delay:1.43s}@-webkit-keyframes load{0%{opacity:1}100%{opacity:.2}}