loading遮罩

　　　　 .loading{
            position: relative;
            cursor: default;
            point-events: none;
            text-shadow: none!important;
            color: transparent!important;
            -webkit-transition: all 0s linear;
            transition: all 0s linear;
        }
        .loading:before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            background: rgba(255,255,255,.8);
            width: 100%;
            height: 100%;
            border-radius: .28571429rem;
            z-index: 100;
        }
        .loading:after {
            position: absolute;
            content: '';
            top: 50%;
            left: 50%;
            margin: -1.5em 0 0 -1.5em;
            width: 3em;
            height: 3em;
            -webkit-animation: segment-spin .6s linear;
            animation: segment-spin .6s linear;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            border-radius: 500rem;
            border-color: #767676 rgba(0,0,0,.1) rgba(0,0,0,.1);
            border-style: solid;
            border-width: .2em;
            box-shadow: 0 0 0 1px transparent;
            visibility: visible;
            z-index: 101;
        }
        @-webkit-keyframes segment-spin {
            from {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

        @keyframes segment-spin {
            from {
                -webkit-transform: rotate(0);
                transform: rotate(0)
            }
            to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg)
            }
        }

从semantic-ui提取出来的，和loading的gif相比，好处在于，原来的内容不会变，只要增加一个class就可以了

值得注意的是，当前不支持ie9以下的版本