CSS loading 正在加载画面

当后台 ajax 需要较长时间加载时，需要给用户提示，不然用户可能不知道你在做什么，屏幕却无反应。

比如在屏幕上显示几个变化的小球：http://kevinqq.herokuapp.com/bootstrap/manage/logs?page=1

https://tianya.herokuapp.com/articles/ty556242?page=1

CSS

.loading-overlay {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	opacity: .8;
	background: rgba(0, 0, 0, 0.1);
	transition: all .6s;
}

.sk-three-bounce {
	position: absolute;
	top: 60%;
	left: 48%;
  opacity: .8;
}

.sk-three-bounce .sk-child {
	width: 20px;
	height: 20px;
	background-color: salmon;
	border-radius: 100%;
	display: inline-block;
	-webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
	animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
	-webkit-animation-delay: -0.32s;
	animation-delay: -0.32s;
}

.sk-three-bounce .sk-bounce2 {
	-webkit-animation-delay: -0.16s;
	animation-delay: -0.16s;
}

.sk-three-bounce .sk-bounce3 {
	-webkit-animation-delay: -0.08s;
	animation-delay: -0.08s;
}
@-webkit-keyframes sk-three-bounce {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes sk-three-bounce {
	0%,
	80%,
	100% {
		-webkit-transform: scale(0);
		transform: scale(0);
	}
	40% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

HTML

  
 Loading demo
  
 http://codepen.io/anon/pen/GNKdOB
    
 page 1 2 3 ... 10


  

  

  

  

  

training Demo:

http://codepen.io/anon/pen/GNKdOB

实际应用：

使用 jQuery/Vue等 Javascript，在后台访问（ajax）或其它耗时操作时，显示/隐藏即可

Vue HTML:

Vue script:

var vm = new Vue({
    el: '#vm',
    data: {
        table: location.pathname.split('/').pop(),
        items: [],
        page: null,
        loading: false,
        models: {
            'users': {'name': '名字', 'email': '电子邮箱'},

        },
    },
    methods: {
         getItemsByPage: function  (page, size) {
            this.loading = true;
            this.$nextTick(function () {    //异步更新队列: 可以在数据变化之后立即更新 DOM
//                this.loading = true;
//                console.log('now is loading:'+this.loading) // => 'updated'
              })
            var self = this;
            getJSON('/api/' + this.table, {
                page: page || '1',
                size: size || '10'
            }, function (err, data) {
                self.items = data.items;
                self.page = data.page;
                self.loading = false; // 隐藏 loading

            });

        },
        gotoPage: function (page, back) {
            if (! back) {
            history.pushState({pg_his: page}, "", this.table+"?page="+page);  // /logs?page=3
            }
            return this.getItemsByPage(page, this.page.limit);
        }
    }
});

Live DEMO:

kevinqq.heroku.com