Question

我想在我的网页中应用 bootstrap loading spinner 。当用户点击页面时，它会加载文件并显示在网页上，用户可以通过单击“刷新”按钮重新生成文件。我想显示加载微调器，因为在网页中加载文件会有一些延迟，以及当用户点击生成并在网页中加载文件的刷新按钮时。

html代码：

<div ng-controller="getFileToShow">
    <div><button ng-click="loadData()">Refresh</button>
        <div>
            <object standby="loading" id="htmlFrame"  ng-attr-data="{{fileName}}" type="application/pdf" width="100%" height="100%">asa
                <iframe ng-src="{{fileName}}" width="100%" height="100%" style="border: none;">
                    This browser does not support PDFs. Please download the PDF to view it:
                </iframe>
            </object> 
        </div>

    </div>
</div>

js code：

app.controller('getFileToShow', function ($scope,MyAppService) {
    $scope.getFileToShow = function () {
        MyAppService.getFileToShow().then(
            function (response) {
                $scope.fileName = response;
            },
            function (errResponse) {

            });
    }
    $scope.getFileToShow();
});
//service call
myAppService.getFileToShow = function(){
    var Url = myURL+'/myAppData/getFileToShow.form';
    $http.get(repUrl).then(
        function (response) {
            //logic here
        },
    );
    return deferred.promise;
}

我试过https://www.w3schools.com/howto/howto_css_loader.asp

的CSS：

.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

无法在我上面提到的html代码中应用加载微调器。任何意见将是有益的。如何在页面仍然加载时显示加载图标以在网页上显示文件（我的上面的html代码用于在网页上显示文件）。类似地，当用户再次单击“刷新”按钮时，将需要一些时间来重新生成文件并将新创建的文件重新加载到显示旧文件的网页。

Answer 1

(function($){ 
// preloader
  $(window).ready(function(){
    $('#preloader').delay(400).fadeOut(1000);
    $('#overlay').delay(400).fadeOut(1000);
  })

}(jQuery));

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 2px solid #f2f3f3;
    border-top: solid #428bca;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#overlay {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 1);
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Creating A Loading Spinner</title>

    <link rel="stylesheet" href="preloader.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="preloader.js"></script>
</head>

<body>


    </div>
    
    
    <div id="preloader" class="spinner"></div>
</body>

</html>

这可能与装载程序

有关

html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="preloader.css">
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="preloader.js"></script>
</head>

<body>

    <div id="preloader" class="spinner"></div>
</body>

JS：

(function($){ 
// preloader
    $(window).ready(function(){
    $('#preloader').delay(400).fadeOut(1000);
    $('#overlay').delay(400).fadeOut(1000);
})

}(jQuery));

的CSS：

body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.spinner {
    width: 80px;
    height: 80px;
    border: 2px solid #f2f3f3;
    border-top: solid #428bca;
    border-radius: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    animation: spin 1s infinite linear;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

#overlay {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 1);
    position: absolute;
    text-align: center;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

Answer 2

在您的按钮上添加一个javascript可以找到的类：

<button class="btn" ng-click="loadData()">Refresh</button>

将这种支持放入javascript

$(document).ready(function () {
    $('.btn').on('click', function() {
        var e=this;
        setTimeout(function() {
            e.innerHTML='<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Refreshing...';
            e.disabled=true;
        },0);
        return true;
    });
});

该按钮将被禁用，并带有一个微调图标。页面加载完成后，该按钮将自动重新启用，并且文本将恢复为原始。

页面加载时无法显示加载图标 - bootstrap

2 个答案: