ReactPullLoad.less

@transition-duration: .2s;

//pull-load container
.pull-load{
    position: relative;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}
//head load more msg and refreshing UI
.pull-load-head{
    position: absolute;
    transform: translate3d(0px, -100%, 0px);
    width: 100%;
    .state-refreshing &,
    .state-refreshed &{
        position: relative;
        transform: none;
    }
}
//body container content
.pull-load-body{
    // transform: translate3d(0,0,0);// make over the msg-refreshed
    position: relative;
    .state-refreshing &{
        // transform: translate3d(0,@height,0);
        transition: transform @transition-duration;
    }

    .state-refreshed &{
        // handle resolve within 1s
        // animation: refreshed @transition-duration*5;
    }

    .state-reset &{
        transition: transform @transition-duration;
    }
}


/*
 * HeadNode default UI
 */
@bg-dark: #EFEFF4;

@height: 3rem;
@fontSize: 12px;
@fontColor: darken(@bg-dark, 40%);// state hint
@btnColor: darken(@bg-dark, 60%);// load more

@pullingMsg: '下拉刷新';
@pullingEnoughMsg: '松开刷新';
@refreshingMsg: '正在刷新...';
@refreshedMsg: '刷新成功';
@loadingMsg: '正在加载...';
@btnLoadMore: '加载更多';
@btnLoadNoMore: '没有更多';

.ui-loading(){
    display: inline-block;
    vertical-align: middle;
    font-size: 1.5rem;
    width: 1em;
    height: 1em;
    border: 2px solid darken(@bg-dark, 30%);
    border-top-color: #fff;
    border-radius: 100%;
    animation: circle .8s infinite linear;
}

.pull-load-head-default{
    text-align: center; font-size: @fontSize; line-height: @height; color: @fontColor;
    &:after{
        .state-pulling &{
            content: @pullingMsg
        }

        .state-pulling.enough &{
            content: @pullingEnoughMsg;
        }

        .state-refreshing &{
            content: @refreshingMsg;
        }
        .state-refreshed &{
            content: @refreshedMsg;
        }
    }
    .state-pulling &{
        opacity: 1;

        // arrow down icon
        i{
            display: inline-block;
            font-size: 2em;
            margin-right: .6em;
            vertical-align: middle;
            height: 1em;
            border-left: 1px solid;
            position: relative;
            transition: transform .3s ease;

            &:before,&:after{
                content: '';
                position: absolute;
                font-size: .5em;
                width: 1em;
                bottom: 0px;
                border-top: 1px solid;
            }
            &:before{
                right: 1px;
                transform: rotate(50deg);
                transform-origin: right;
            }
            &:after{
                left: 0px;
                transform: rotate(-50deg);
                transform-origin: left;
            }
        }
    }
    .state-pulling.enough &{
        // arrow up
        i{
            transform: rotate(180deg);
        }
    }
    .state-refreshing &{
        i{
            margin-right: 10px;
            .ui-loading();
        }
    }
    // 刷新成功提示消息
    .state-refreshed &{
        opacity: 1;
        transition: opacity 1s;

        // √ icon
        i{
            display: inline-block;
            box-sizing: content-box;
            vertical-align: middle;
            margin-right: 10px;
            font-size: 20px;
            height: 1em;
            width: 1em;
            border: 1px solid;
            border-radius: 100%;
            position: relative;

            &:before{
                content: '';
                position: absolute;
                top: 3px;
                left: 7px;
                height: 11px;
                width: 5px;
                border: solid;
                border-width: 0 1px 1px 0;
                transform: rotate(40deg);
            }
        }
    }
}

.pull-load-footer-default{
    text-align: center; font-size: @fontSize; line-height: @height; color: @fontColor;
    &:after{
        .state-loading &{
            content: @btnLoadMore;
        }
    }
    &.nomore:after{
        content: @btnLoadNoMore;
    }
    .state-loading &{
        i{
            margin-right: 10px;
            .ui-loading();
        }
    }
}
// loading效果
@keyframes circle {
    100% { transform: rotate(360deg); }
}