vant-weapp/dist/loading/index.wxss

1 line
5.3 KiB
Plaintext

.loading.inline{position:relative;margin:15px;text-align:center;display:-webkit-box;display:flex;-webkit-box-pack:center;justify-content:center}.loading.inline .circle{display:inline-block;height:24px;width:24px;border-radius:100%;border:3px solid transparent;box-sizing:border-box;border-color:rgba(0,0,0,.1);border-top-color:rgba(255,255,255,.7);-webkit-animation:loading 1s linear infinite;animation:loading 1s linear infinite}.loading.inline.black .circle{border-color:#c9c9c9;border-top-color:#666}.loading.inline .circular{display:inline-block;height:24px;width:24px;-webkit-animation:loading 2s linear infinite;animation:loading 2s linear infinite}.loading.inline .circular::after{content:'';display:block;width:100%;height:100%;border-radius:100%;border:3px solid transparent;box-sizing:border-box;-webkit-animation:circular 2s ease infinite;animation:circular 2s ease infinite}.loading.inline .spinner{width:30px;height:30px;display:inline-block;position:relative;-webkit-animation:loading 1s linear infinite;animation:loading 1s linear infinite;-webkit-animation-timing-function:steps(12);animation-timing-function:steps(12)}.loading.inline .spinner view{width:100%;height:100%;position:absolute;text-align:center;top:0;left:0}.loading.inline .spinner view::after{content:'';background:#fff;height:25%;display:block;width:2px;border-radius:2px;margin:0 auto}.loading.inline .spinner view:nth-child(1){-webkit-transform:rotate(30deg);transform:rotate(30deg);opacity:.78571}.loading.inline .spinner view:nth-child(2){-webkit-transform:rotate(60deg);transform:rotate(60deg);opacity:.71429}.loading.inline .spinner view:nth-child(3){-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:.64286}.loading.inline .spinner view:nth-child(4){-webkit-transform:rotate(120deg);transform:rotate(120deg);opacity:.57143}.loading.inline .spinner view:nth-child(5){-webkit-transform:rotate(150deg);transform:rotate(150deg);opacity:.5}.loading.inline .spinner view:nth-child(6){-webkit-transform:rotate(180deg);transform:rotate(180deg);opacity:.42857}.loading.inline .spinner view:nth-child(7){-webkit-transform:rotate(210deg);transform:rotate(210deg);opacity:.35714}.loading.inline .spinner view:nth-child(8){-webkit-transform:rotate(240deg);transform:rotate(240deg);opacity:.28571}.loading.inline .spinner view:nth-child(9){-webkit-transform:rotate(270deg);transform:rotate(270deg);opacity:.21429}.loading.inline .spinner view:nth-child(10){-webkit-transform:rotate(300deg);transform:rotate(300deg);opacity:.14286}.loading.inline .spinner view:nth-child(11){-webkit-transform:rotate(330deg);transform:rotate(330deg);opacity:.07143}.loading.inline .spinner view:nth-child(12){-webkit-transform:rotate(360deg);transform:rotate(360deg);opacity:0}.loading.inline.black .spinner view::after{content:'';background:#c9c9c9;height:25%;display:block;width:2px;border-radius:2px;margin:0 auto}.loading.block .dot-spinner{margin:15px 15px;overflow:hidden}.loading.block .dot-spinner view{width:8px;height:8px;border-radius:8px;background:#fff;display:inline-block;margin-left:3px;position:relative;left:0;-webkit-animation:dot-spinner 2s ease infinite;animation:dot-spinner 2s ease infinite}.loading.block .dot-spinner view:nth-child(1){-webkit-animation-delay:.5s;animation-delay:.5s}.loading.block .dot-spinner view:nth-child(2){-webkit-animation-delay:.4s;animation-delay:.4s}.loading.block .dot-spinner view:nth-child(3){-webkit-animation-delay:.3s;animation-delay:.3s}.loading.block .dot-spinner view:nth-child(4){-webkit-animation-delay:.2s;animation-delay:.2s}.loading.block .dot-spinner view:nth-child(5){-webkit-animation-delay:.1s;animation-delay:.1s}.loading.block .dot-spinner view:nth-child(6){-webkit-animation-delay:0s;animation-delay:0s}.loading.block .dot-spinner view:nth-child(6){display:none}.loading.block .dot-spinner view:nth-child(7){display:none}.loading.block .dot-spinner view:nth-child(8){display:none}.loading.block .dot-spinner view:nth-child(9){display:none}.loading.block .dot-spinner view:nth-child(10){display:none}.loading.block .dot-spinner view:nth-child(11){display:none}.loading.block .dot-spinner view:nth-child(12){display:none}.loading.block.black .dot-spinner view{background:#c9c9c9}@-webkit-keyframes dot-spinner{40%{left:-webkit-calc(50% - 15px);left:calc(50% - 15px)}60%{left:-webkit-calc(50% - 15px);left:calc(50% - 15px)}100%{left:100%}}@keyframes dot-spinner{40%{left:-webkit-calc(50% - 15px);left:calc(50% - 15px)}60%{left:-webkit-calc(50% - 15px);left:calc(50% - 15px)}100%{left:100%}}@-webkit-keyframes circular{0%{border-color:#fff}12%{border-top-color:transparent}25%{border-right-color:transparent}37%{border-bottom-color:transparent}50%{border-left-color:transparent}64%{border-top-color:#fff}75%{border-right-color:#fff}87.5%{border-bottom-color:#fff}100%{border-color:#fff}}@keyframes circular{0%{border-color:#fff}12%{border-top-color:transparent}25%{border-right-color:transparent}37%{border-bottom-color:transparent}50%{border-left-color:transparent}64%{border-top-color:#fff}75%{border-right-color:#fff}87.5%{border-bottom-color:#fff}100%{border-color:#fff}}@-webkit-keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes loading{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}