tinper-bee/dist/LoadingState/index.css

React Components living for enterprise-class pc backend application

.u-button{background:#eceff1;border:1px solid #eceff1;border-radius:3px;color:#212121;position:relative;min-width:72px;padding:4px 13px;display:inline-block;font-family:Open Sans,Helvetica Neue,Arial,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:14px;font-weight:500;line-height:1;letter-spacing:0;overflow:hidden;will-change:box-shadow,transform;outline:none;cursor:pointer;text-decoration:none;text-align:center;line-height:1.57143;vertical-align:middle}.u-button::-moz-focus-inner{border:0}.u-button:hover{background-color:#dfe1e6;border-color:#eee}.u-button:active{background-color:#dfe1e6;border-color:#bdbdbd}.u-button.colored{color:#f53c32}.u-button.colored:focus:not(:active){background-color:#dfe1e6;border-color:#bdbdbd}.u-button.disable,.u-button.u-button[disabled]{cursor:not-allowed}.u-button.disable,.u-button.disable:active,.u-button.disable:focus,.u-button.disable:hover,.u-button.u-button[disabled],.u-button.u-button[disabled]:active,.u-button.u-button[disabled]:focus,.u-button.u-button[disabled]:hover{background-color:#dfe1e6;border-color:#dfe1e6;color:#fff}.u-button:not(.u-button-icon) i.uf{line-height:normal}input.u-button[type=submit]{-webkit-appearance:none}.u-button-floating{border-radius:50%;font-size:14px;height:38px;margin:auto;min-width:38px;width:38px;padding:0;line-height:normal;border:1px solid #a5adba}.u-button-floating.colored{background:#43a047;color:#fff;background:#fff}.u-button-floating.colored:hover{background-color:#66bb6a}.u-button-floating.colored:active,.u-button-floating.colored:focus:not(:active){background-color:#43a047}.u-button.disabled,.u-button[disabled]{cursor:not-allowed;background-color:#dfe1e6;border-color:#dfe1e6;color:#fff}.u-button-default{color:#333;background-color:#fff;border-color:#ccc}.u-button-default:active,.u-button-default:hover{background-color:#e6e6e6;border-color:#adadad}.u-button-border{color:#212121;border:1px solid #a5adba;background:#fff}.u-button-border:active,.u-button-border:hover{color:#212121;background-color:#ebecf0;border-color:#a5adba}.u-button.u-button-primary{color:#fff;background-color:#f53c32;border:1px solid #f53c32}.u-button.u-button-primary:hover{background-color:#e60012;border-color:#e60012}.u-button.u-button-primary.focus,.u-button.u-button-primary:focus{background-color:#f53c32;border-color:#f53c32}.u-button.u-button-primary.active,.u-button.u-button-primary:active{background-color:#e60012;border-color:#e60012}.u-button.u-button-secondary{color:#212121;background-color:#eceff1;border:1px solid #eceff1}.u-button.u-button-secondary:hover{background-color:#dfe1e6;border-color:#dfe1e6}.u-button.u-button-secondary.focus,.u-button.u-button-secondary:focus{background-color:#eceff1;border-color:#eceff1}.u-button.u-button-secondary.active,.u-button.u-button-secondary:active{background-color:#dfe1e6;border-color:#dfe1e6}.u-button.u-button-danger{color:#fff;background-color:#f44336;border:1px solid #f44336}.u-button.u-button-danger:hover{background-color:#d32f2f;border-color:#d32f2f}.u-button.u-button-danger.focus,.u-button.u-button-danger:focus{background-color:#f44336;border-color:#f44336}.u-button.u-button-danger.active,.u-button.u-button-danger:active{background-color:#d32f2f;border-color:#d32f2f}.u-button.u-button-info{color:#fff;background-color:#00bcd4;border:1px solid #00bcd4}.u-button.u-button-info:hover{background-color:#0097a7;border-color:#0097a7}.u-button.u-button-info.focus,.u-button.u-button-info:focus{background-color:#00bcd4;border-color:#00bcd4}.u-button.u-button-info.active,.u-button.u-button-info:active{background-color:#0097a7;border-color:#0097a7}.u-button.u-button-warning{color:#fff;background-color:#ff9800;border:1px solid #ff9800}.u-button.u-button-warning:hover{background-color:#f57c00;border-color:#f57c00}.u-button.u-button-warning.focus,.u-button.u-button-warning:focus{background-color:#ff9800;border-color:#ff9800}.u-button.u-button-warning.active,.u-button.u-button-warning:active{background-color:#f57c00;border-color:#f57c00}.u-button.u-button-success{color:#fff;background-color:#4caf50;border:1px solid #4caf50}.u-button.u-button-success:hover{background-color:#388e3c;border-color:#388e3c}.u-button.u-button-success.focus,.u-button.u-button-success:focus{background-color:#4caf50;border-color:#4caf50}.u-button.u-button-success.active,.u-button.u-button-success:active{background-color:#388e3c;border-color:#388e3c}.u-button.u-button-dark{color:#fff;background-color:#616161;border:1px solid #616161}.u-button.u-button-dark:hover{background-color:#424242;border-color:#424242}.u-button.u-button-dark.focus,.u-button.u-button-dark:focus{background-color:#616161;border-color:#616161}.u-button.u-button-dark.active,.u-button.u-button-dark:active{background-color:#424242;border-color:#424242}.u-button.u-button-light{color:#616161;background-color:#fff;border:1px solid #fff}.u-button.u-button-light:hover{background-color:#bdbdbd;border-color:#bdbdbd}.u-button.u-button-light.focus,.u-button.u-button-light:focus{background-color:#fff;border-color:#fff}.u-button.u-button-light.active,.u-button.u-button-light:active{background-color:#bdbdbd;border-color:#bdbdbd}.u-button-border.u-button-success{color:#4caf50;background-color:#fff;border:1px solid #4caf50}.u-button-border.u-button-success:hover{background-color:#388e3c;border-color:#388e3c;color:#fff}.u-button-border.u-button-success.focus,.u-button-border.u-button-success:focus{color:#4caf50;background-color:#fff;border-color:#4caf50}.u-button-border.u-button-success.active,.u-button-border.u-button-success:active{color:#fff;background-color:#388e3c;border-color:#388e3c}.u-button-border.u-button-warning{color:#ff9800;background-color:#fff;border:1px solid #ff9800}.u-button-border.u-button-warning:hover{background-color:#f57c00;border-color:#f57c00;color:#fff}.u-button-border.u-button-warning.focus,.u-button-border.u-button-warning:focus{color:#ff9800;background-color:#fff;border-color:#ff9800}.u-button-border.u-button-warning.active,.u-button-border.u-button-warning:active{color:#fff;background-color:#f57c00;border-color:#f57c00}.u-button-border.u-button-danger{color:#f44336;background-color:#fff;border:1px solid #f44336}.u-button-border.u-button-danger:hover{background-color:#d32f2f;border-color:#d32f2f;color:#fff}.u-button-border.u-button-danger.focus,.u-button-border.u-button-danger:focus{color:#f44336;background-color:#fff;border-color:#f44336}.u-button-border.u-button-danger.active,.u-button-border.u-button-danger:active{color:#fff;background-color:#d32f2f;border-color:#d32f2f}.u-button-border.u-button-info{color:#00bcd4;background-color:#fff;border:1px solid #00bcd4}.u-button-border.u-button-info:hover{background-color:#0097a7;border-color:#0097a7;color:#fff}.u-button-border.u-button-info.focus,.u-button-border.u-button-info:focus{color:#00bcd4;background-color:#fff;border-color:#00bcd4}.u-button-border.u-button-info.active,.u-button-border.u-button-info:active{color:#fff;background-color:#0097a7;border-color:#0097a7}.u-button-border.u-button-primary{color:#f53c32;background-color:#fff;border:1px solid #f53c32}.u-button-border.u-button-primary:hover{background-color:#e60012;border-color:#e60012;color:#fff}.u-button-border.u-button-primary.focus,.u-button-border.u-button-primary:focus{color:#f53c32;background-color:#fff;border-color:#f53c32}.u-button-border.u-button-primary.active,.u-button-border.u-button-primary:active{color:#fff;background-color:#e60012;border-color:#e60012}.u-button-border.u-button-secondary{color:#eceff1;background-color:#fff;border:1px solid #eceff1}.u-button-border.u-button-secondary:hover{background-color:#dfe1e6;border-color:#dfe1e6;color:#fff}.u-button-border.u-button-secondary.focus,.u-button-border.u-button-secondary:focus{color:#eceff1;background-color:#fff;border-color:#eceff1}.u-button-border.u-button-secondary.active,.u-button-border.u-button-secondary:active{color:#fff;background-color:#dfe1e6;border-color:#dfe1e6}.u-button-border.u-button-dark{color:#616161;background-color:#fff;border:1px solid #616161}.u-button-border.u-button-dark:hover{background-color:#424242;border-color:#424242;color:#fff}.u-button-border.u-button-dark.focus,.u-button-border.u-button-dark:focus{color:#616161;background-color:#fff;border-color:#616161}.u-button-border.u-button-dark.active,.u-button-border.u-button-dark:active{color:#fff;background-color:#424242;border-color:#424242}.u-button-border.u-button-light{color:#616161;background-color:#fff;border:1px solid #fff}.u-button-border.u-button-light:hover{background-color:#bdbdbd;border-color:#bdbdbd;color:#fff}.u-button-border.u-button-light.focus,.u-button-border.u-button-light:focus{color:#616161;background-color:#fff;border-color:#fff}.u-button-border.u-button-light.active,.u-button-border.u-button-light:active{color:#fff;background-color:#bdbdbd;border-color:#bdbdbd}.u-button-icon{border-radius:50%;font-size:14px;height:32px;margin:auto;min-width:32px;width:32px;padding:0;line-height:normal;border:1px solid #a5adba}.u-button-lg{padding:8px 15px;font-size:14px}.u-button-xg{padding:10.5px 18px;font-size:16px}.u-button-md{padding:4px 13px;font-size:14px}.u-button-sm{padding:3px 5px;font-size:12px}.u-button-squared{border-radius:0}.u-button-round{border-radius:1000px}.u-button-block{white-space:normal;display:block;width:100%}.u-button-pill-left{border-radius:500px 0 0 500px}.u-button-pill-right{border-radius:0 500px 500px 0}.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-rotate>div{position:absolute;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;border:none!important;width:40px;height:40px;top:50%;left:50%;margin-left:-22px;margin-top:-22px;background:transparent!important;display:inline-block;-webkit-animation:rotate1 1s 0s linear infinite!important;animation:rotate1 1s 0s linear infinite!important;text-align:center;line-height:40px}.u-loading.u-loading-rotate>div>img{width:40px}.u-loading.u-loading-rotate>div>.uf{color:#0084ff;font-size:40px;padding:0}.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-rotate.u-loading-rotate-lg>div>img{width:60px}.u-loading.u-loading-rotate.u-loading-rotate-lg>div>.uf{font-size:60px}.u-loading.u-loading-rotate.u-loading-rotate-lg>.u-loading-desc{padding-top:38px}.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-rotate.u-loading-rotate-sm>div>img{width:25px}.u-loading.u-loading-rotate.u-loading-rotate-sm>div>.uf{font-size:25px}.u-loading.u-loading-rotate.u-loading-rotate-sm>.u-loading-desc{padding-top:25px}.u-loading.u-loading-rotate.u-loading-rotate-primary>div>.uf{color:#3f51b5}.u-loading.u-loading-rotate.u-loading-rotate-success>div>.uf{color:#4caf50}.u-loading.u-loading-rotate.u-loading-rotate-warning>div>.uf{color:#ff9800}.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)}}.u-loading-state{position:relative}.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-custom>div,.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-rotate>div{left:20px}.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-custom>div>.rotate-icon-container,.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-rotate>div>.rotate-icon-container{width:22px;height:22px;-webkit-animation:rotate 1s 0s linear infinite;animation:rotate 1s 0s linear infinite}.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-custom>div>.rotate-icon-container>.uf,.u-loading-state>:not(.u-loading-backdrop) .u-loading.u-loading-rotate>div>.rotate-icon-container>.uf{padding:0;line-height:22px;color:#fff}.u-loading-state .u-loading-desc{position:absolute;left:30px;top:2px;font-size:16px;color:#000;text-align:center}.u-loading-state-label{margin-left:20px}