1

I want to apply bootstrap loading spinner in my webpage. When user hits the page it loads the file and displays on the webpage and user can regenerate the file by clicking Refresh button. I want to show the loading spinner as there will be some delay to load the file in the webpage as well as when user clicks on Refresh button which generates and loads the file in webpage.

html code:

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

I tried from 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); }
}

Could not able to apply the loading spinner in my above mentioned html code. Any advice would be helpful. How to show the loading icon when the page is still loading to show the file on the webpage(my above html code is used to display the file on webpage). Similarly when User clicks on Refresh button again it will take some time to regenerate the file and reload that newly created file to the webpage which is displaying the old file.

Eonasdan
  • 7,563
  • 8
  • 55
  • 82
DIM
  • 132
  • 2
  • 11

2 Answers2

0

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

This might with the loader

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;
}
Ian
  • 687
  • 3
  • 8
  • 17
  • @lan - i dont want to use any extra jar files. If you see the link https://www.w3schools.com/howto/howto_css_loader.asp its very straight forward. I want to implement using that. Issue is even after the page is loaded the spinner is seen on the webpage. If you see my js code, the file i'm retrieving is dynamic, i cannot give any timeout as we cannot predict how long it might take to load/generate the file and load. – DIM Jul 17 '17 at 21:13
  • exactly that is why in the js it says window.ready that means that the page is ready and after it fades out after 1000 milliseconds after the page is loaded. – Ian Jul 17 '17 at 21:51
0

Add a class to your button that javascript can find:

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

The put this support into 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;
    });
});

The button will be disabled and have a spinner icon. When the page finishes loading, the button will automatically re-enable and the text will be returned to original.

Colin
  • 21
  • 2