.ThreeStateTips {
    width:100%;
    height:100%;
    position:relative;
}

.three-state-tips-container {
    height:20px;
    max-width:100%;
    font-size:12px;
    position:absolute;
    white-space: nowrap;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
}

.three-state-tips-container span {
    display:inline-block;
    vertical-align:middle;
}

.three-state-tips-container .three-state-tips-icon{
    width:16px;
    height:16px;
}

.three-state-tips-container .three-state-tips-text {
    margin-left: 5px;
    height: 16px;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #878787;
    white-space: nowrap;
    width: calc(100% - 20px);
}

.three-state-tips-container .three-state-tips-icon.three-state-tips-success {
    background-position: -10px -458px;
}

.three-state-tips-container .three-state-tips-icon.three-state-tips-loading {
    background:url(img/loading.gif) center no-repeat;
    background-size:100% 100%;
}

.three-state-tips-container .three-state-tips-icon.three-state-tips-fail {
    background-position: -33px -459px
}