**

Loading加载方式的实现

**

1.border-radius属性实现

HTML代码

    <!-- loading加载实现效果 -->

    <div class="wrapper">
        <div id="content">
            <div id="circle"></div>
        </div>
    </div>

css代码

.wrapper{
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


/* 添加动画，实现旋转效果 */
@keyframes loading_360 {
    0%{
        transform: rotate(0deg);
    }
    
    100%{
        transform: rotate(360deg);
    }
}   

/* 设置border-radius */
#circle{
    /* 设置边框大小 */
    border: 4px solid #eee;
    width: 40px;
    height: 40px;
    /* 设置circle为圆形 */
    border-radius: 50%;
    /* 设置上边边框为红色，便于旋转时看到 */
    border-top: 4px solid red;
    /* 使用动画，进行循环 */
    animation: loading_360 0.8s infinite linear;
}

效果图

2.使用iconfont字体实现
HTML代码

    <!-- loading加载实现效果 -->

    <div class="wrapper">
        <div id="content">
            <!-- <div id="circle"></div> -->
            <div id="loading" class="iconfont">&#xe645;</div>
        </div>
    </div>

css代码

#loading{
    font-size: 20px;
    /* 设置为line-block属性后动画生效 */
    display: inline-block;
    color: red;
    /* 使用动画，进行循环 */
    animation: loading_icon 2s infinite linear;
}

/* 添加动画，实现旋转效果 */
@keyframes loading_icon {
    0%{
        transform: rotate(0deg);
    }
    
    to{
        /* 旋转1圈 */
        transform: rotate(1turn);
    }
}   

效果图