简单CSS数据加载动画

众所周知，我们在开发前台页面的时候总是会涉及到数据加载的过程，期间数据量比较大的时候可能会出现加载的空档期，通过用户体验上来看，这段时间用户并不知道是卡了还是在加载过程中，所有才有了加载动画，我做了个比较简单的加载CSS，接下来看一下代码：

CSS

.loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid rgba(51,120,255,1);
            width: 50px;
            height: 50px;
            /* animation-name:load; */
            animation: load 2s linear infinite;
            position:absolute;//设置显示位置绝对定位  与后边配合就能显示在中心位置
            top:0px;
            bottom:0px;
            right:0px;
            left:0px;
            margin:55% auto;
        }

        @keyframes load {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);//动画 转动360度
            }
        }

HTML：

<div class="loading" style="                height: 700px;
                background-color: rgba(128, 128, 128,0.5);
                z-index: 999;
                position: absolute;
                top: 0px;
                bottom: 0px;
                right: 0px;
                left: 0px;
                display: none">
            <div style="z-index:999;" class="loader"></div>
        </div>

JS:

LoadVisitorRecord: function () {
                $(".loading").css("display", "block");//加载数据前显示
                var self = this;
                var formFileds = {
                    OrderID: self.OrderId,
                    Date: self.date
                };
                $.ajax({
                    url: "ashx/MyOrderHandler.ashx",
                    type: "post",
                    dataType: "json",
                    data: $.extend({ method: "GetVisitRecord" }, formFileds),
                    success: function (data) {
                        if (data.VisitRecord.length != "undefined") {
                            //debugger;
                            self.visitorRecord = data.VisitRecord;
                            if (self.visitorRecord.length > 0) {
                                self.havedata = true;
                            }
                            else {
                                self.havedata = false;
                            }
                        }
                        else {
                            self.havedata = false;
                        }
                        $(".loading").css("display", "none");//加载数据结束后隐藏
                    },
                    error: function (error) {
                        self.havedata = false;
$(".loading").css("display", "none");//加载数据报错后隐藏
                    }
                });
            }

效果图：