impossible d'afficher l'icône de chargement lors du chargement de la page - bootstrap

Je souhaite appliquer bootstrap loading spinner dans ma page Web. Lorsque l'utilisateur clique sur la page, il charge le fichier et affiche sur la page Web et l'utilisateur peut régénérer le fichier en cliquant sur le bouton Actualiser. Je veux montrer le spinner de chargement car il y aura un certain délai pour charger le fichier dans la page Web ainsi que lorsque l'utilisateur clique sur le bouton Actualiser qui génère et charge le fichier dans la page Web.impossible d'afficher l'icône de chargement lors du chargement de la page - bootstrap

code 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>

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

J'ai essayé de 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); } 
}

Impossible en mesure d'appliquer la fileuse de chargement dans mon code html mentionné ci-dessus. Tout conseil serait utile. Comment afficher l'icône de chargement lorsque la page est en cours de chargement pour afficher le fichier sur la page Web (mon code html ci-dessus est utilisé pour afficher le fichier sur la page Web). De même, lorsque l'utilisateur clique à nouveau sur le bouton Actualiser, il faudra un certain temps pour régénérer le fichier et recharger ce fichier nouvellement créé sur la page Web qui affiche l'ancien fichier.

Source

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>

Cela pourrait avec le chargeur

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

Source

2017-07-17 21:01:06 Ian

@lan - je ne veux pas utiliser des fichiers jar supplémentaires. Si vous voyez le lien https://www.w3schools.com/howto/howto_css_loader.asp c'est très simple. Je veux mettre en œuvre en utilisant cela. Problème est même après le chargement de la page le spinner est vu sur la page Web. Si vous voyez mon code js, le fichier que je récupère est dynamique, je ne peux pas donner de timeout car nous ne pouvons pas prédire combien de temps il faudra pour charger/générer le fichier et charger. – DIM

exactement c'est pourquoi dans le js il est dit window.ready cela signifie que la page est prête et après elle disparaît après 1000 millisecondes après le chargement de la page. – Ian

impossible d'afficher l'icône de chargement lors du chargement de la page - bootstrap

Répondre

Questions connexes