cube-ui
Version:
A fantastic mobile ui lib implement by Vue
1 lines • 3.61 kB
CSS
.cube-loading{font-size:24px}.cube-loading-spinners{position:relative;display:block;width:1em;height:1em}.cube-loading-spinner{position:absolute;left:44.5%;top:37%;width:2px;height:25%;border-radius:50%/20%;opacity:.25;background-color:currentColor;-webkit-animation:spinner-fade 1s linear infinite;animation:spinner-fade 1s linear infinite}.cube-loading-spinner:first-child{-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:rotate(-150deg) translateY(-150%);transform:rotate(-150deg) translateY(-150%)}.cube-loading-spinner:nth-child(2){-webkit-animation-delay:.083333333333333s;animation-delay:.083333333333333s;-webkit-transform:rotate(-120deg) translateY(-150%);transform:rotate(-120deg) translateY(-150%)}.cube-loading-spinner:nth-child(3){-webkit-animation-delay:.166666666666667s;animation-delay:.166666666666667s;-webkit-transform:rotate(-90deg) translateY(-150%);transform:rotate(-90deg) translateY(-150%)}.cube-loading-spinner:nth-child(4){-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-transform:rotate(-60deg) translateY(-150%);transform:rotate(-60deg) translateY(-150%)}.cube-loading-spinner:nth-child(5){-webkit-animation-delay:.333333333333333s;animation-delay:.333333333333333s;-webkit-transform:rotate(-30deg) translateY(-150%);transform:rotate(-30deg) translateY(-150%)}.cube-loading-spinner:nth-child(6){-webkit-animation-delay:.416666666666667s;animation-delay:.416666666666667s;-webkit-transform:rotate(0deg) translateY(-150%);transform:rotate(0deg) translateY(-150%)}.cube-loading-spinner:nth-child(7){-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-transform:rotate(30deg) translateY(-150%);transform:rotate(30deg) translateY(-150%)}.cube-loading-spinner:nth-child(8){-webkit-animation-delay:.583333333333333s;animation-delay:.583333333333333s;-webkit-transform:rotate(60deg) translateY(-150%);transform:rotate(60deg) translateY(-150%)}.cube-loading-spinner:nth-child(9){-webkit-animation-delay:.666666666666667s;animation-delay:.666666666666667s;-webkit-transform:rotate(90deg) translateY(-150%);transform:rotate(90deg) translateY(-150%)}.cube-loading-spinner:nth-child(10){-webkit-animation-delay:.75s;animation-delay:.75s;-webkit-transform:rotate(120deg) translateY(-150%);transform:rotate(120deg) translateY(-150%)}.cube-loading-spinner:nth-child(11){-webkit-animation-delay:.833333333333333s;animation-delay:.833333333333333s;-webkit-transform:rotate(150deg) translateY(-150%);transform:rotate(150deg) translateY(-150%)}.cube-loading-spinner:nth-child(12){-webkit-animation-delay:.916666666666667s;animation-delay:.916666666666667s;-webkit-transform:rotate(180deg) translateY(-150%);transform:rotate(180deg) translateY(-150%)}@-webkit-keyframes spinner-fade{0%{opacity:.85}50%{opacity:.25}to{opacity:.25}}@keyframes spinner-fade{0%{opacity:.85}50%{opacity:.25}to{opacity:.25}}.cube-recycle-list{position:relative;height:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}.cube-recycle-list-main{min-height:100%}.cube-recycle-list-fake{height:1px}.cube-recycle-list-invisible{top:-1000px;visibility:hidden}.cube-recycle-list-item{width:100%;position:absolute;box-sizing:border-box}.cube-recycle-list-transition{position:absolute;opacity:0;-webkit-transition-property:opacity;transition-property:opacity;-webkit-transition-duration:.5s;transition-duration:.5s}.cube-recycle-list-loading{overflow:hidden}.cube-recycle-list-loading-content{text-align:center}.cube-recycle-list-spinner{margin:10px auto;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}