Javascript angularjs:-图像加载器将出现在第一个div中

嗨，我想实现一个加载器，当用户点击一个配置文件时，该加载器应该在给定时间后隐藏。我实际上实现了一个超时功能，当用户点击按钮时，div在特定时间后隐藏

加载程序位于左侧，而不是相应的div上，这会导致UI中出现问题

下面是我的代码片段：-

   $scope.totalNumberOfProfile = totalNumberOfProfile;
        $scope.categoryOfProfile = "Member Who Shortlisted You";

        $scope.custom = true;
        $scope.alertDisplayed = false;
        $scope.connect = function(profile) {

            $timeout(function() {
                $scope.totalNumberOfProfile--;
                profile.show = false;
                profile.status = "connect";
                document.getElementById("myDiv").style.display="block";
                //console.log($scope.totalNumberOfProfile);
                if ($scope.totalNumberOfProfile == 0) {
                    $scope.custom = false;
                    $scope.alertDisplayed = true;
                    $timeout(function() {
                        $scope.alertDisplayed = false;
                    }, 2000)
                };
            }, 600)



        };

代码的html为：-

<div owl-carousel-item="" ng-repeat="profile in updatedProfile | filter:isoffice" ng-if="profile.show">

                    <!-- Panel in owl carousel -->
                    <div id="discover " ng-class="discover_image" ng-switch on="profile.member">

                        <li style="margin-left:0px; margin-right:0px">
                            <div class="thumbnail_photo">
                                <button class="close" ng-click="remove(profile)"><span class="glyphicon glyphicon-remove"></span></button>
                                <a href="#/discover/{{profile.basic.username}} " target="_blank"><span class="discover_pic_container" style="background:url({{profile.photo_details.photos[0].domain_name+profile.photo_details.photos[0].medium}}) no-repeat center top"></span></a>
                                <div class="discover_transparent">
                                    <div class="discover_name">{{profile.basic.display_name }}</div>
                                </div>

                            </div>
                            <div class="recent_join_user_info">23 yrs, 5'4", Gujarati, Hindu Mumbai, India</div>
                            <!--                            <button class="discover_connect_btn btn btn-lg " ng-click="connect(profile)" ng-if="profile.member">Connect</button>-->

                            <button ng-class="{'discover_premium btn btn-lg': userLogin == 2, 'discover_connect_btn btn btn-lg': userLogin == 3}"  ng-click="connect(profile)" >{{userinfor}}</button>
<div id = "myDiv" style="display:none"><img id = "myImage" src = "images/725.gif"></div>

                        </li>
                    </div>

                </div>

{{profile.basic.display_name}
23岁，5英尺4英寸，印度孟买古吉拉特邦
{{userinfor}}

---

我正在尝试实现的gif文件名为725.gif。请帮助我解决问题。谢谢。

您应该在loader div中添加这些CSS属性

#myDiv {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     z-index: 10;
}