I'm haveving a problem with my links on my html page. I ask for your help to find a solution because I'm not too good at CSS..... I explain the problem: when launching my html page, there is a loader that appears in full screen with css... when the loader disappears, I no longer know how to use my links on my page.
Here is the Html and Css code below :
HTML
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Archivia</title>
<!-- App CSS -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="{{ asset('css/fontawesome/css/font-awesome.min.css') }}" rel="stylesheet">
<!-- Bootstrap -->
<link href="{{ asset('css/bootstrap/bootstrap.css') }}" rel="stylesheet">
<!-- DataTables -->
<link href="{{ asset('css/dataTables/dataTables.bootstrap4.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ asset('css/sb-admin-2/sb-admin-2.css') }}"/>
<!-- Fileinput Style -->
<link href="{{ asset('css/fileinput/fileinput.min.css') }}" rel="stylesheet">
<!-- Google Font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source Sans Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav role="navigation" style="margin-bottom: 0">
<div >
<button type="button" data-toggle="collapse" data-target=".navbar-collapse">
<span >Toggle navigation</span>
<span ></span>
<span ></span>
<span ></span>
</button>
<a href="#"><img src="{{ asset('assets/img/logo.png') }}" alt="" height="30"></a>
</div>
<!-- /.navbar-header -->
<ul >
<li >
<a data-toggle="dropdown" href="#">
<i ></i> Test user <i ></i>
</a>
<ul >
<li>
<a href="logout.php">
Logout
</a>
</li>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div role="navigation">
<div >
<ul id="side-menu">
<li >
<div >
<input id="search" type="text" placeholder="Search...">
</div>
<!-- /input-group -->
</li>
<li >
<a href="" ><i ></i> APPS TEST</a>
</li>
<li >
<a href="{{ url('bin') }}"><i ></i> Test link</a>
</li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<div id="page-wrapper">
<div >
<div >
<h1 ><i ></i> My APP > <i ></i> APPS</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div >
<div >
<div >
<h5 ><i ></i> <i>APPS</i></h5>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
<div >
<div >
<div >
<h4>Folders</h4>
<hr>
</div>
<div >
<table id="folders">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Content</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td><i>Files</i></td>
<td >
<a href="test.php" data-toggle="tooltip" data-placement="top" title="Open">
<span><i class='fa fa-folder-open'></i> </span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<div >
<span >
<span >
<h1>
<span >A</span>
<span >R</span>
<span >C</span>
<span >H</span>
<span >I</span>
<span >V</span>
<span >I</span>
<span >A</span>
</h1>
</span>
</span>
</div>
<!-- jQuery -->
<script src="{{ asset('js/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap -->
<script src="{{ asset('js/bootstrap/bootstrap.min.js') }}"></script>
<!-- DataTables JavaScript -->
<script src="{{ asset('js/dataTables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('js/dataTables/dataTables.bootstrap4.js') }}"></script>
<!-- Custom Theme JavaScript -->
<script src="{{ asset('js/sb-admin-2/sb-admin-2.min.js') }}"></script>
<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
const css = document.querySelector('.preloader');
window.addEventListener('load', () => {
setTimeout(() => {
css.classList.add('fondu-out');
}, 2240);
});
</script>
</body>
</html>
CSS
.preloader{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #00968f;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.preloader h1{
text-align: center;
position: relative;
margin-top: 70px;
font-size: 2.4rem;
letter-spacing: 0.3px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #fff;
animation: flash 1.2s linear infinite;
}
.preloader .loader{
display: block;
width: 175px;
height: 175px;
position: relative;
}
.preloader .loader::before{
content: '';
width: 175px;
height: 175px;
position: absolute;
border: 5px solid #fff;
border-color: transparent #fff transparent #fff ;
border-radius: 50%;
animation: loader 1.5s infinite ease-in-out;
}
.preloader .loader-in::before{
content: '';
width: 145px;
height: 145px;
position: absolute;
margin-top: 15px;
margin-left: 15px;
border: 5px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
animation: loader-in 3s infinite ease-in-out;
}
@keyframes loader {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
@keyframes loader-in {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(-360deg);
}
}
@keyframes flash {
0%{
color: #00968f;
text-shadow: 0 0 7px #ddd;
}
90%{
color: #fff;
text-shadow: none;
}
100%{
color: #00968f;
text-shadow: 0 0 7px #ddd;
}
}
.fondu-out{
opacity: 0;
transition: opacity 0.8s ease-out;
}
My wish is that the loader can appear (fill all the screen) then disappear after the page has loaded and the links are functional after. How can i solve this?
Thanks again
CodePudding user response：
The problem seems to be that you are setting your opacity at 0 but you keep displaying the preloader so you have an invisible div in front of your page.
You can remove via css like this
.fondu-out{
opacity: 0;
transition: opacity 0.8s ease-out;
display:none
}
Or in your script tag you can add
const css = document.querySelector('.preloader');
window.addEventListener('load', () => {
setTimeout(() => {
css.classList.add('fondu-out');
setTimeout(() => {
css.style.display = "none"
}, 1000)
}, 2240);
});
CodePudding user response：
Preloader overlapping whole screen after fade out. That is the reason you are unable to use html links
Solution
Just replace css of .fondu-out in your code
.fondu-out{
opacity: 0;display: none;
transition: opacity 0.8s ease-out;
}