CSS实现动态loading效果

CSS实现动态loading效果

摘要分割线前

摘要分割线后

1. 列表项目1
2. 列表项目22
3. 列表项目333

普通分割线前

普通分割线后
A =bigl(begin{matrix} N n end{matrix} bigr)

<div class="loading">

    <span></span>
</div>
<style>
    .loading{
        width: 150px;
        height: 4px;
        border-radius: 2px;
        margin: 0 auto;
        margin-top:100px;
        position: relative;
        background: lightgreen;
        -webkit-animation: changeBgColor 1.04s ease-in infinite alternate;
    }
    .loading span{
        display: inline-block;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: lightgreen;
        position: absolute;
        margin-top: -7px;
        margin-left:-8px;
        -webkit-animation: changePosition 1.04s ease-in infinite alternate;
    }
    @-webkit-keyframes changeBgColor{
        0%{
            background: lightgreen;
        }
        100%{
            background: lightblue;
        }
    }
    @-webkit-keyframes changePosition{
        0%{
            background: lightgreen;
        }
        100%{
            margin-left: 142px;
            background: lightblue;
        }
    }
</style>