'Loader animation don't allow me to use html links

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 class="navbar navbar-default navbar-static-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><img src="{{ asset('assets/img/logo.png') }}" alt="" height="30"></a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown color-cmc">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i> Test user <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li>
                        <a class="dropdown-item" href="logout.php">
                            Logout
                        </a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default sidebar" role="navigation">
            <div class="sidebar-nav navbar-collapse">
                <ul class="nav" id="side-menu">
                    <li class="sidebar-search">
                        <div class="input-group custom-search-form">
                            <input id="search" type="text" class="form-control" placeholder="Search...">
                        </div>
                        <!-- /input-group -->
                    </li>
                    <li class="color-cmc">
                        <a href="" class="text-center"><i class="fa fa-cube fa-fw"></i> APPS TEST</a>
                    </li>
                    <li class="color-cmc">
                        <a href="{{ url('bin') }}"><i class="fa fa-trash-o fa-fw"></i> Test link</a>
                    </li>
                </ul>
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header"><i class="fa fa-hdd-o"></i> My APP > <i class="fa fa-folder-open-o"></i> APPS</h1>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
        <div class="first_view">
            <div class="row">
                <div class="col-lg-12">
                    <h5 class="text-muted"><i class="fa fa-folder-open-o"></i> <i>APPS</i></h5>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
                <div class="row">
                    <div class="col-lg-12">
                        <div class="panel-heading text-muted">
                            <h4>Folders</h4>
                            <hr>
                        </div>
                        <div class="table-responsive">
                            <table class="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 class="tooltip-demo">
                                            <a href="test.php" class="btn btn-circle btn-xs btn-default btn-folder" data-toggle="tooltip" data-placement="top" title="Open">
                                                <span><i class='fa fa-folder-open'></i> </span>
                                            </a>&nbsp;
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- /.table-responsive -->
                    </div>
                    <!-- /.col-lg-12 -->
                </div>
                <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<div class="preloader">
    <span class="loader">
        <span class="loader-in">
            <h1>
                <span class="lettre">A</span>
                <span class="lettre">R</span>
                <span class="lettre">C</span>
                <span class="lettre">H</span>
                <span class="lettre">I</span>
                <span class="lettre">V</span>
                <span class="lettre">I</span>
                <span class="lettre">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

Solution 1:^[1]

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

Solution 2:^[2]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Priya jain
Solution 2	R4ncid

'Loader animation don't allow me to use html links

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]