:host { display: block; } @keyframes loading { 0% { -webkit-transform: rotate(0deg); transform : rotate(0deg); } to { -webkit-transform: rotate(360deg); transform : rotate(360deg); } } .coolui-scroller-loadmore { width : 100%; height : 100rpx; font-size : 28rpx; display : flex; justify-content: center; align-items : center; .cool-indicator { display : -webkit-flex; display : -ms-flexbox; display : flex; line-height : 1; visibility : hidden; opacity : 0; -webkit-transition: all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53); -o-transition : all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53); transition : all 0.3s cubic-bezier(0.55, 0.085, 0.68, 0.53); &.cool-indicator--isopened { opacity : 1; visibility: initial; } } .cool-indicator__body, .cool-indicator__content { -webkit-flex : 0 0 auto; -ms-flex : 0 0 auto; flex : 0 0 auto; -webkit-box-flex: 0; } .at-indicator__content { -webkit-align-self : center; -ms-flex-item-align: center; align-self : center; margin-left : 24rpx; color : #999; font-size : 28rpx; } .cool-loading, .cool-loading__ring { display : inline-block; position: relative; width : 36rpx; height : 36rpx; } .cool-loading__ring { -webkit-box-sizing: border-box; box-sizing : border-box; display : block; position : absolute; margin : 2px; border-width : 2px; border-style : solid; border-color : #6190e8 transparent transparent; border-radius : 50%; -webkit-animation : loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; animation : loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; &:nth-child(1) { -webkit-animation-delay: -.45s; animation-delay : -0.45s; } &:nth-child(2) { -webkit-animation-delay: -.3s; animation-delay : -0.3s; } &:nth-child(3) { -webkit-animation-delay: -.15s; animation-delay : -0.15s; } } }