ページが読み込まれているときに読み込みアイコンを表示できません - ブートストラップ

私はブートストラップローディングスピナーを私のWebページに適用したいと思います。ユーザーがページにヒットすると、ファイルをロードしてWebページに表示され、ユーザーは[更新]ボタンをクリックしてファイルを再生成できます。私はロードスピナーを表示したいのですが、ウェブページ内のファイルをロードするのにいくらかの遅延があり、ユーザがウェブページ内のファイルを生成してロードするリフレッシュボタンをクリックしたときにそうです。ページが読み込まれているときに読み込みアイコンを表示できません - ブートストラップ

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コード：

.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); } 
}

がローディングスピナーを適用することができませんでした：

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; 
}

Iはhttps://www.w3schools.com/howto/howto_css_loader.asp

CSSから試み私の上記のhtmlコードで。どんな助言も役に立つでしょう。ページが読み込まれているときに読み込みアイコンを表示してウェブページ上のファイルを表示する方法（上記のHTMLコードはウェブページ上にファイルを表示するために使用されます）同様に、ユーザーが[更新]ボタンを再度クリックすると、ファイルを再生成し、新しく作成したファイルを古いファイルを表示しているWebページに再ロードするまでに時間がかかります。

出典

2017-07-17 DIM

(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; 
}

出典

2017-07-17 21:01:06 Ian

@lan - 私は余分なjarファイルを使用したくありません。 https://www.w3schools.com/howto/howto_css_loader.aspというリンクが非常に簡単です。私はそれを使用して実装したい。問題は、ページが読み込まれた後でも、スピナーがWebページに表示されることです。私のjsコードが見れば、私が取得したファイルは動的です。ファイルをロードしてロードするのにかかる時間を予測できないため、タイムアウトを与えることはできません。 – DIM

ちょうどそれがjsでwindow.readyと言われているのは、ページが読み込まれた後、ページが読み込まれてから1000ミリ秒後に消えた後であることを意味します。 – Ian

ページが読み込まれているときに読み込みアイコンを表示できません - ブートストラップ

答えて

関連する問題