zoukankan      html  css  js  c++  java
  • 加载数据时,页面显示正在加载的动画,支持移动端

    最近在使用ionic3做一个移动端APP,在用户网络环境差的时候,查询数据会比较慢,这个时候需要模拟其他成熟的APP给页面上加入一个加载的动画。由于一开始我不知道ionic3本身已经提供了一套组件,所以自己先做了一套样式。提供给不用框架的同学们参考和交流。

    话不多说,直接上代码:

    HTML:

    <div #modal class="modal">
      <div class="little-square">
        <div class="outer">
          <div class="box1"></div>
          <div class="box2"></div>
          <div class="box3"></div>
        </div>
      </div>
    </div>

    SASS:

    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #333;
      z-index: 999;
      opacity: 0.5;
      display: flex;
      justify-content: center;
      align-items: center;
      .little-square {
        background: #fff;
        width: 17vw;
        height: 17vw;
        display: flex;
        justify-content: center;
        align-items: center;
        .outer {
          width: 16vw;
          height: 16vw;
          position: relative;
          animation: moveover 2s ease-out infinite;
          .box1 {
            position: absolute;
            width: 8vw;
            height: 16vw;
            border-radius: 8vw 0 0 8vw;
            background: linear-gradient(#444, #999);
            z-index: 2;
          }
          .box2 {
            position: absolute;
            width: 8vw;
            height: 16vw;
            border-radius: 0 8vw 8vw 0;
            left: 50%;
            background: linear-gradient(#eee, #999);
            z-index: 1;
          }
          .box3 {
            position: absolute;
            width: 12vw;
            height: 12vw;
            top: 2vw;
            left: 2vw;
            border-radius: 50%;
            background: #fff;
            z-index: 3;
          }
        }
      }

    TS:

    //点击某个按钮之后,调用遮罩层,显示其中动画
    this.modal.nativeElement.className = "show modal";
        AJAX代码执行片断{
        。。。。。。。。
        //AJAX代码执行完,最后一句加入隐藏遮罩层
        this.modal.nativeElement.className = "destroy";
        }
          
  • 相关阅读:
    Socket
    字符串,byte,字典转换整理
    1-嵌入式面试题库
    10-FreeRTOS 队列
    9-FreeRTOS API获取任务使用CPU时间
    7-代码区 | 常量区 | 静态区(全局区) | 堆区 | 栈区
    8-FreeRTOS任务API
    7-FreeRTOS时间片进行任务调度
    6-C指针
    用Union体测试处理器大小端
  • 原文地址:https://www.cnblogs.com/tincyho/p/7280945.html
Copyright © 2011-2022 走看看