My website can be found at: www.rootscope.in
While working on the CSS for my site, I encountered an issue with the following code:
.loader {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
background: url(assets/img/icons/loader.svg) no-repeat center center #fe9d68;
background-size: 60px;
}
For HTML:
<div>
<div id="content" class="container">
<!--main content-->
<div id="wrap">
<div ui-view="content" id="content"></div>
</div>
</div>
</div>
And Angular routing:
angular.module('myApp').config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched URL, redirect to /login
$urlRouterProvider.otherwise("home");
$stateProvider
.state('home', {
url: "/home",
views: {
content: {
templateUrl: 'views/home.html',
controller: function ($scope) {
}
},
}
});
Some of the scripts used in the template include:
<script src="assets/js/jquery.countdown.min.js"></script>
<script src="assets/js/jquery.easydropdown.min.js"></script>
<script src="assets/js/jquery.flexslider-min.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/jquery.themepunch.tools.min.js"></script>
<script src="assets/js/jquery.themepunch.revolution.min.js"></script>
<script src="assets/js/jquery.viewportchecker.min.js"></script>
<script src="assets/js/jquery.waypoints.min.js"></script>
In one of the script tags, I have included this line:
$('.loader').fadeOut('slow'); // End Loader
However, the loading svg icon animation keeps appearing on the page. When inspecting the page in Chrome and removing the .loader class, the page loads but some styles are missing. As I bought this HTML/CSS template and added Angular to it, I am unsure what the issue is with the .loader class.