美文网首页
[每天进步一点点~] uni-app css 实现 10种 lo

[每天进步一点点~] uni-app css 实现 10种 lo

作者: WYL_99 | 来源:发表于2021-01-20 16:55 被阅读0次

    第一种

    效果图：


    检测动画.gif

    需要准备一张下面的底图，因为我写不出这种分成无数线段的圆。。。


    加载loading底图.png

    代码：

    <template>
    <view class="load-box">
        <view class="loading"></view>
    </view>
</template>

<script>
    export default {
        name: 'loading',
        data() {
            return {
                
            };
        },
        onShow() {
        },
        methods:{
        }
    }
</script>

<style lang="scss" scoped>
    .load-box {
        position: relative;
    }
    .loading {
        width: 510rpx;
        height: 510rpx;
        display: inline-block;
        vertical-align: middle;
        -webkit-animation: a 1s steps(30) infinite;
        animation: loading 1s steps(30) infinite;
        background: transparent url(/static/thunder/loading.png) no-repeat;
        background-size: 100%;
    }
    .text {
        position: absolute;
        bottom: 13%;
        left: 50%;
        transform: translateX(-50%);
        color: #167BEF;
        font-size: 28rpx;
        z-index: 12;
    }
    .loading-normal {
        -webkit-animation: a 1s steps(8) infinite;
        animation: loading 1s steps(8) infinite;
    }
    @keyframes loading {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
    
        to {
            -webkit-transform: rotate(1turn);
            transform: rotate(1turn);
        }
    }
</style>

    第二种

    效果图：



    代码：

    <template>
    <view>
        <view class="spinner">
            <view class="bounce1"></view>
            <view class="bounce2"></view>
            <view class="bounce3"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name:'loadEllipsis',
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss" scoped>
    .spinner {
        
    }

    .spinner>view {
        width: 10rpx;
        height: 10rpx;
        background-color: #167BEF;

        border-radius: 50%;
        display: inline-block;
        -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
        animation: bouncedelay 1.4s infinite ease-in-out;
        /* Prevent first frame from flickering when animation starts */
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .spinner .bounce1 {
        -webkit-animation-delay: -0.32s;
        animation-delay: -0.32s;
    }

    .spinner .bounce2 {
        -webkit-animation-delay: -0.16s;
        animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {

        0%,
        80%,
        100% {
            -webkit-transform: scale(0.0)
        }

        40% {
            -webkit-transform: scale(1.0)
        }
    }

    @keyframes bouncedelay {

        0%,
        80%,
        100% {
            transform: scale(0.0);
            -webkit-transform: scale(0.0);
        }

        40% {
            transform: scale(1.0);
            -webkit-transform: scale(1.0);
        }
    }
</style>

    第三种

    效果图：



    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="rect1"></view>
          <view class="rect2"></view>
          <view class="rect3"></view>
          <view class="rect4"></view>
          <view class="rect5"></view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      margin: 100px auto;
      width: 50px;
      height: 60px;
      text-align: center;
      font-size: 10px;
    }
     
    .spinner > view {
      background-color: #67CF22;
      height: 100%;
      width: 6px;
      margin-right: 3px;
      display: inline-block;
       
      -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
      animation: stretchdelay 1.2s infinite ease-in-out;
    }
     
    .spinner .rect2 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .spinner .rect3 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .spinner .rect4 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .spinner .rect5 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    @-webkit-keyframes stretchdelay {
      0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
      20% { -webkit-transform: scaleY(1.0) }
    }
     
    @keyframes stretchdelay {
      0%, 40%, 100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }  20% {
        transform: scaleY(1.0);
        -webkit-transform: scaleY(1.0);
      }
    }
</style>

    第4种

    效果图：




    代码：

    <template>
    <view class="">
        <view class="spinner"></view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      width: 60px;
      height: 60px;
      background-color: #67CF22;
     
      margin: 100px auto;
      -webkit-animation: rotateplane 1.2s infinite ease-in-out;
      animation: rotateplane 1.2s infinite ease-in-out;
    }
     
    @-webkit-keyframes rotateplane {
      0% { -webkit-transform: perspective(120px) }
      50% { -webkit-transform: perspective(120px) rotateY(180deg) }
      100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
    }
     
    @keyframes rotateplane {
      0% {
        transform: perspective(120px) rotateX(0deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
      } 50% {
        transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
        -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
      } 100% {
        transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
        -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
      }
    }
</style>

    第5种

    效果图：


    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="double-bounce1"></view>
          <view class="double-bounce2"></view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      width: 60px;
      height: 60px;
     
      position: relative;
      margin: 100px auto;
    }
     
    .double-bounce1, .double-bounce2 {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #67CF22;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
       
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }
     
    .double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    @-webkit-keyframes bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
</style>

    第6种

    效果图：



    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="cube1"></view>
          <view class="cube2"></view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      margin: 100px auto;
      width: 32px;
      height: 32px;
      position: relative;
    }
     
    .cube1, .cube2 {
      background-color: #67CF22;
      width: 30px;
      height: 30px;
      position: absolute;
      top: 0;
      left: 0;
       
      -webkit-animation: cubemove 1.8s infinite ease-in-out;
      animation: cubemove 1.8s infinite ease-in-out;
    }
     
    .cube2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    @-webkit-keyframes cubemove {
      25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
      50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
      75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
      100% { -webkit-transform: rotate(-360deg) }
    }
     
    @keyframes cubemove {
      25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
        -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
      } 50% {
        transform: translateX(42px) translateY(42px) rotate(-179deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
      } 50.1% {
        transform: translateX(42px) translateY(42px) rotate(-180deg);
        -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
      } 75% {
        transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
        -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
      } 100% {
        transform: rotate(-360deg);
        -webkit-transform: rotate(-360deg);
      }
    }
</style>

    第7种

    效果图：


    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="dot1"></view>
          <view class="dot2"></view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      margin: 100px auto;
      width: 90px;
      height: 90px;
      position: relative;
      text-align: center;
       
      -webkit-animation: rotate 2.0s infinite linear;
      animation: rotate 2.0s infinite linear;
    }
     
    .dot1, .dot2 {
      width: 60%;
      height: 60%;
      display: inline-block;
      position: absolute;
      top: 0;
      background-color: #67CF22;
      border-radius: 100%;
       
      -webkit-animation: bounce 2.0s infinite ease-in-out;
      animation: bounce 2.0s infinite ease-in-out;
    }
     
    .dot2 {
      top: auto;
      bottom: 0px;
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
    @keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
     
    @-webkit-keyframes bounce {
      0%, 100% { -webkit-transform: scale(0.0) }
      50% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
</style>

    第8种

    效果图：


    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="bounce1"></view>
          <view class="bounce2"></view>
          <view class="bounce3"></view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      margin: 100px auto 0;
      width: 150px;
      text-align: center;
    }
     
    .spinner > view {
      width: 30px;
      height: 30px;
      background-color: #67CF22;
     
      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
     
    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
</style>

    第9种

    效果图：



    代码：

    <template>
    <view class="">
        <view class="spinner"></view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      width: 40px;
      height: 40px;
      margin: 100px auto;
      background-color: #333;
     
      border-radius: 100%; 
      -webkit-animation: scaleout 1.0s infinite ease-in-out;
      animation: scaleout 1.0s infinite ease-in-out;
    }
     
    @-webkit-keyframes scaleout {
      0% { -webkit-transform: scale(0.0) }
      100% {
        -webkit-transform: scale(1.0);
        opacity: 0;
      }
    }
     
    @keyframes scaleout {
      0% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
        opacity: 0;
      }
    }
</style>

    第10种

    效果图：


    代码：

    <template>
    <view class="">
        <view class="spinner">
          <view class="spinner-container container1">
            <view class="circle1"></view>
            <view class="circle2"></view>
            <view class="circle3"></view>
            <view class="circle4"></view>
          </view>
          <view class="spinner-container container2">
            <view class="circle1"></view>
            <view class="circle2"></view>
            <view class="circle3"></view>
            <view class="circle4"></view>
          </view>
          <view class="spinner-container container3">
            <view class="circle1"></view>
            <view class="circle2"></view>
            <view class="circle3"></view>
            <view class="circle4"></view>
          </view>
        </view>
    </view>
</template>

<script>
</script>

<style>
    .spinner {
      margin: 100px auto;
      width: 20px;
      height: 20px;
      position: relative;
    }
     
    .container1 > view, .container2 > view, .container3 > view {
      width: 6px;
      height: 6px;
      background-color: #333;
     
      border-radius: 100%;
      position: absolute;
      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
      animation: bouncedelay 1.2s infinite ease-in-out;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
     
    .spinner .spinner-container {
      position: absolute;
      width: 100%;
      height: 100%;
    }
     
    .container2 {
      -webkit-transform: rotateZ(45deg);
      transform: rotateZ(45deg);
    }
     
    .container3 {
      -webkit-transform: rotateZ(90deg);
      transform: rotateZ(90deg);
    }
     
    .circle1 { top: 0; left: 0; }
    .circle2 { top: 0; right: 0; }
    .circle3 { right: 0; bottom: 0; }
    .circle4 { left: 0; bottom: 0; }
     
    .container2 .circle1 {
      -webkit-animation-delay: -1.1s;
      animation-delay: -1.1s;
    }
     
    .container3 .circle1 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
     
    .container1 .circle2 {
      -webkit-animation-delay: -0.9s;
      animation-delay: -0.9s;
    }
     
    .container2 .circle2 {
      -webkit-animation-delay: -0.8s;
      animation-delay: -0.8s;
    }
     
    .container3 .circle2 {
      -webkit-animation-delay: -0.7s;
      animation-delay: -0.7s;
    }
     
    .container1 .circle3 {
      -webkit-animation-delay: -0.6s;
      animation-delay: -0.6s;
    }
     
    .container2 .circle3 {
      -webkit-animation-delay: -0.5s;
      animation-delay: -0.5s;
    }
     
    .container3 .circle3 {
      -webkit-animation-delay: -0.4s;
      animation-delay: -0.4s;
    }
     
    .container1 .circle4 {
      -webkit-animation-delay: -0.3s;
      animation-delay: -0.3s;
    }
     
    .container2 .circle4 {
      -webkit-animation-delay: -0.2s;
      animation-delay: -0.2s;
    }
     
    .container3 .circle4 {
      -webkit-animation-delay: -0.1s;
      animation-delay: -0.1s;
    }
     
    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }
     
    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
</style>

    相关文章

      网友评论

          本文标题：[每天进步一点点~] uni-app css 实现 10种 lo

          本文链接：https://www.haomeiwen.com/subject/ddbkzktx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|[每天进步一点点~] uni-app css 实现 10种 lo|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！