利用less循环模拟动态loading

来源：互联网发布：程序员叫美女什么编辑：程序博客网时间：2024/05/02 01:28

技术分析

效果的实现，首先需要在圆周上静态均匀排布圆（绝对定位+三角函数），然后用动画效果实现颜色的渐变。

html如下，这里li的个数表示圆周上的圆的个数

<div class="loading">    <ul class="ui-repeater">        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>        <li class="ui-repeater-item"></li>    </ul></div>

less如下，知道斜边和圆心角可以通过三角函数算出每个圆应该排布的坐标（top，left）。
可以自定义修改圆周上圆的个数，只需要修改@counters和html中<li>的个数。

//定义变量//@counters 圆的个数@counters: 8;//@radius 圆的半径@radius: 20px;//圆心角@centralangle: 360deg/@counters;//循环.loop(@n) when (@n > 0) {    &:nth-child(@{n}) {        //三角函数实现定位        top: @radius*sin((@centralangle*@n));        left: @radius*cos((@centralangle*@n));        //动画须注意完成动画的时间大于等于所有圆延迟运动的总时间才有转圈的效果        -webkit-animation:light .8s infinite .1s*@n;        -o-animation:light .8s infinite .1s*@n;        animation:light .8s infinite .1s*@n;    }    //循环调用自身    .loop((@n - 1));}//动画效果声明@-webkit-keyframes light {    0% {        background-color:#efefef;    }    50% {        background-color:#0094ff    }    100% {        background-color:#efefef;    }}@-o-keyframes light {    0% {        background-color:#efefef;    }    50% {        background-color:#0094ff    }    100% {        background-color:#efefef;    }}@keyframes light {    0% {        background-color:#efefef;    }    50% {        background-color:#0094ff    }    100% {        background-color:#efefef;    }}.loading {    .ui-repeater {        position: relative;        .ui-repeater-item {            position: absolute;            width: 10px;            height: 10px;            border-radius: 5px;            list-style-type:none;            .loop(@counters);        }    }}

1 0