技術標籤：前端css

**

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);
    }
}   

效果圖