tinper-bee
Version:
React Components living for enterprise-class pc backend application
1 lines • 5.57 kB
CSS
.u-loading-desc{width:100%;position:absolute;top:50%;padding-top:32px;font-size:14px;color:#212121;text-align:center;line-height:22px}.u-loading-container{position:relative}.u-loading.u-loading-default>div,.u-loading.u-loading-rotate>div{position:absolute;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:none;width:40px;height:40px;top:50%;left:50%;margin-left:-22px;margin-top:-22px;background:transparent;display:inline-block;-webkit-animation:rotate1 1s 0s linear infinite;animation:rotate1 1s 0s linear infinite;text-align:center;line-height:40px}.u-loading.u-loading-default>div>img,.u-loading.u-loading-rotate>div>img{width:40px}.u-loading.u-loading-default>div>.uf,.u-loading.u-loading-rotate>div>.uf{color:#0084ff;font-size:40px;padding:0}.u-loading.u-loading-default.u-loading-rotate-lg>div,.u-loading.u-loading-rotate.u-loading-rotate-lg>div{margin-left:-35px;margin-top:-35px;width:60px;height:60px;line-height:60px}.u-loading.u-loading-default.u-loading-rotate-lg>div>img,.u-loading.u-loading-rotate.u-loading-rotate-lg>div>img{width:60px}.u-loading.u-loading-default.u-loading-rotate-lg>div>.uf,.u-loading.u-loading-rotate.u-loading-rotate-lg>div>.uf{font-size:60px}.u-loading.u-loading-default.u-loading-rotate-lg>.u-loading-desc,.u-loading.u-loading-rotate.u-loading-rotate-lg>.u-loading-desc{padding-top:38px}.u-loading.u-loading-default.u-loading-rotate-sm>div,.u-loading.u-loading-rotate.u-loading-rotate-sm>div{margin-left:-15px;margin-top:-15px;width:25px;height:25px;line-height:25px}.u-loading.u-loading-default.u-loading-rotate-sm>div>img,.u-loading.u-loading-rotate.u-loading-rotate-sm>div>img{width:25px}.u-loading.u-loading-default.u-loading-rotate-sm>div>.uf,.u-loading.u-loading-rotate.u-loading-rotate-sm>div>.uf{font-size:25px}.u-loading.u-loading-default.u-loading-rotate-sm>.u-loading-desc,.u-loading.u-loading-rotate.u-loading-rotate-sm>.u-loading-desc{padding-top:25px}.u-loading.u-loading-default.u-loading-rotate-primary>div>.uf,.u-loading.u-loading-rotate.u-loading-rotate-primary>div>.uf{color:#3f51b5}.u-loading.u-loading-default.u-loading-rotate-success>div>.uf,.u-loading.u-loading-rotate.u-loading-rotate-success>div>.uf{color:#4caf50}.u-loading.u-loading-default.u-loading-rotate-warning>div>.uf,.u-loading.u-loading-rotate.u-loading-rotate-warning>div>.uf{color:#ff9800}.u-loading.u-loading-default>div>img{width:34px;height:34px}.u-loading-default-container .u-loading-desc{margin-top:-12px;color:#f53c32;font-size:12px}.u-loading-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;background-color:hsla(0,0%,100%,.4)}.u-loading-backdrop.full-screen{position:fixed}@-webkit-keyframes rotate1{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(1);transform:rotate(180deg) scale(1)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}@keyframes rotate1{0%{-webkit-transform:rotate(0deg) scale(1);transform:rotate(0deg) scale(1)}50%{-webkit-transform:rotate(180deg) scale(1);transform:rotate(180deg) scale(1)}to{-webkit-transform:rotate(1turn) scale(1);transform:rotate(1turn) scale(1)}}.u-loading.u-loading-line{position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-25px}.u-loading.u-loading-line>div{background-color:#c2c3c5;width:6px;height:50px;border-radius:2px;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block}.u-loading.u-loading-line.u-loading-line-lg{margin-top:-50px;margin-left:-30px}.u-loading.u-loading-line.u-loading-line-lg>div{width:8px;height:90px}.u-loading.u-loading-line.u-loading-line-sm{margin-top:-22px;margin-left:-20px}.u-loading.u-loading-line.u-loading-line-sm>div{width:4px;height:35px}.u-loading.u-loading-line div:first-child{-webkit-animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .1s infinite cubic-bezier(.2,.68,.18,1.08);background-color:#f44336}.u-loading.u-loading-line div:nth-child(2){-webkit-animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .2s infinite cubic-bezier(.2,.68,.18,1.08);background-color:#7ed321}.u-loading.u-loading-line div:nth-child(3){-webkit-animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .3s infinite cubic-bezier(.2,.68,.18,1.08);background-color:#0084ff}.u-loading.u-loading-line div:nth-child(4){-webkit-animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .4s infinite cubic-bezier(.2,.68,.18,1.08);background-color:#ff9800}.u-loading.u-loading-line div:nth-child(5){-webkit-animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08);animation:line-scale 1s .5s infinite cubic-bezier(.2,.68,.18,1.08);background-color:#d0021b}.u-loading.u-loading-line.u-loading-line-primary>div{background-color:#3f51b5}.u-loading.u-loading-line.u-loading-line-success>div{background-color:#4caf50}.u-loading.u-loading-line.u-loading-line-warning>div{background-color:#ff9800}.u-loading.u-loading-custom>div{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}@-webkit-keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}to{-webkit-transform:scaley(1);transform:scaley(1)}}@keyframes line-scale{0%{-webkit-transform:scaley(1);transform:scaley(1)}50%{-webkit-transform:scaley(.4);transform:scaley(.4)}to{-webkit-transform:scaley(1);transform:scaley(1)}}