javascript

AngularJS（6）Loading

页面请求数据时候，为了用户体验，会加入加载数据的动画。
本篇记录如何加入css3的loading动画。

搜索loading css3

  • Loading CSS网址
  • 选择一款自己喜欢的loading
  • 复制css和html到项目中
    • css复制到app.css底部
    • html复制到需要加载的html页面中

通过AngularJS的双向数据绑定实现loading的隐藏显示

  • 加入遮罩层

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
       <!-- html -->
    <div class="mask" ng-if="loading">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>
    <!-- css -->
    .mask{
    	position: fixed;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	background-color:rgba(0,0,0,.4);
    	z-index: 2000;
    }

  • 赋值$scope.loading

    1
    2
    3
    4
    5
    6
    $scope.loading = true;
    HttpService.jsonp('http://api.douban.com/v2/movie/' + $routeParams.category, { start: start, count: count }, function(data) {
        $scope.loading = false;
        ...
    });

  • 使用loading(ng-if=”loading”)

    1
    2
    3
    4
    5
    6
    <div class="mask" ng-if="loading">
        <div class="spinner">
            <div class="dot1"></div>
            <div class="dot2"></div>
        </div>
    </div>