html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PAGE Popup while loading using html css 3 </title>
    
    <style>
    
        body{
            font-family: tahoma;
            font-size: 14px;
            line-height: 22px;
        }
    
        p{
            padding: 20px 0;
        }
    
        h1{
            font-size:40px;
            text-align: center;
            line-height: 52px;
            margin: 25px 0;
            padding-bottom: 25px;
            color: #d31f7a;
            border-bottom: 3px solid #ddd;
            font-weight: 300;
        }
    
    
        .navi{
            text-align: center;
        }
    
        .navi li{
            display: inline-block;
            margin: 5px;
        }
    
        .navi li a{
            padding: 10px 18px;
            display: block;
            text-decoration: none;
            color: #ccc;
            text-transform: uppercase;
            letter-spacing: 2px;
            transition: all 0.5s ease-in-out;
            font-size: 20px;
            
        }
        
        
        .navi li a.active{
            color: #000;
            border-bottom: 1px solid #ddd;
        }
        
        .navi li a:hover{
            color: #d31f7a;
        }
        
        .page-wrap{
            padding: 25px;
        }
        
        .page-wrap .page{
            display: none;
        }
    
        
        
        .page-wrap .page.active{
            display: block;
        }
        
        
        .load{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            background: white;
            display: none;
            
        }
        
        
        .load .in-wrap{
            width: 120px;
            height: 120px;
            position: absolute;
            
        }
        
        .load .sq{
            width: 50px;
            height: 50px;
            background: #d31f7a;
            position: absolute;
            transform: scale(0.1, 0.1) rotate(75deg);
            opacity: 0;
            transition: all 0.4s;
        }
        
        
        .load .sq:nth-child(1){
            left: 0;
            top: 0;
            transition-delay: 0s;
        }
        
         
        .load .sq:nth-child(2){
            left: 59px;
            top: 0;
            transition-delay: 0.1s;
        }
        
         
        .load .sq:nth-child(3){
            left: 0;
            top: 59px;
            transition-delay: 0.2s;
        }
        
        
         
        .load .sq:nth-child(4){
            left: 59px;
            top: 59px;
            transition-delay: 0.3s;
        }
        
        
        .load .sq.animate{
            transform: scale(1, 1) rotate(0deg);
            opacity: 1;
        }
        
        
        .load .sq.full{
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }
        
        .load .in-wrap .sq.white{
            background: white;
        }
        
         
    
    </style>
    
</head>
<body>
    
    <div class="navi">
        <ul>
            <li><a href="" id="on" class="active">FIRST PAGE</a></li>
            <li><a href="" id="tw">LAST PAGE</a></li>
        </ul>
    </div>
    
    <div class="page-wrap">
        <div class="page on active">
            <h1>FIRST PAGE</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi pariatur quod repudiandae at officia amet veritatis doloremque itaque obcaecati nostrum unde rem odio fuga, laboriosam sapiente corrupti. Commodi delectus animi, numquam nihil similique. Repellendus rerum aliquid aut, dolore. Eius, animi corrupti! Beatae doloremque totam ea dolorem ducimus veniam, quod fugit, necessitatibus laudantium suscipit sequi cumque eum id ipsum fugiat, rerum molestias quidem, possimus eius expedita magni dolorum porro error vitae. Omnis quam totam odit, repudiandae excepturi corrupti sequi laudantium eum quis odio officiis dicta voluptatibus aliquid, architecto nisi non tenetur optio aliquam ratione, voluptates ipsa obcaecati, maxime. Eligendi repellendus sint doloribus, quis natus sequi, ducimus ipsa aspernatur impedit animi nostrum deleniti eius asperiores voluptatibus. Blanditiis deleniti quasi, exercitationem neque quos nam ex ea, accusamus optio excepturi repellat aliquam dicta eum minima unde ab, distinctio dolores eligendi ut obcaecati tempore! Nemo dolores eveniet tenetur, eum, quia aliquid consequatur non debitis, tempora et distinctio commodi voluptatum, modi repellendus reiciendis nesciunt animi ad voluptate placeat aperiam adipisci nostrum totam? Molestias modi quasi doloribus consectetur voluptas non cum consequuntur nisi enim error, necessitatibus pariatur sequi, unde sunt tempore eius, amet eligendi. Beatae omnis vero, nobis laboriosam nemo animi officia, officiis explicabo delectus sit possimus, voluptate, necessitatibus! Fuga pariatur placeat mollitia distinctio. Illum ad eius tempora impedit assumenda corporis sit, tempore adipisci exercitationem incidunt voluptas neque, magni illo. Tenetur cupiditate pariatur soluta quis, iste obcaecati, doloribus sit accusantium incidunt ducimus velit sint repellat nobis, id veritatis! Iure, explicabo voluptatum doloremque inventore esse laboriosam quos maiores porro, deserunt deleniti non omnis, quidem odio nemo accusantium saepe, molestiae! Eum odit culpa, expedita dolore, dolores perspiciatis pariatur dolorum animi delectus ratione voluptatum vero omnis aliquam soluta ad est nulla nemo, asperiores nostrum ipsa eaque ipsam. Sequi adipisci libero eaque explicabo facere tempore dolorum perspiciatis tenetur nisi asperiores obcaecati tempora ipsam, sint, consequatur nam cumque. Libero iure illum asperiores molestiae temporibus repellat ex magnam repellendus, quis laudantium commodi dolorem cupiditate, provident, labore distinctio blanditiis, maiores facilis aliquid impedit. Tempore fugit suscipit sed incidunt modi molestiae sit enim, sunt quidem repellendus deserunt vitae, perspiciatis nam, iure. Dolorum ipsa perferendis possimus corporis accusamus, est eveniet saepe delectus quae vitae dolore numquam minus expedita non, nobis dicta, voluptatibus esse deserunt. Quis laboriosam, praesentium tempora debitis nihil cupiditate quo qui porro ea vero aliquam error iste nostrum obcaecati minima eius dignissimos quam accusamus totam expedita, officia ratione? Doloribus cum vero ab minima adipisci distinctio, error modi, nihil minus nam magni ad aperiam provident quas voluptatem tenetur ex sed inventore quibusdam doloremque harum. Nam molestias minima nobis doloribus ad perferendis, voluptatibus omnis eos. Odit illo sequi aut quaerat, tenetur vel autem maiores possimus dignissimos nam corrupti, quos vitae amet itaque laboriosam enim officiis incidunt iste voluptas! Esse aut quas, quisquam fuga! Amet magni laboriosam doloremque ducimus quidem temporibus labore dolore at voluptates recusandae iste iusto quasi tempora esse, eveniet debitis, provident, tenetur ipsa aliquam voluptatibus, possimus dicta quisquam sunt sapiente. Iure quae culpa cum ad doloribus voluptatem facere ipsa expedita consectetur. Aspernatur, aperiam, assumenda!
            </p>
        </div>
        
        
        <div class="page tw">
            <h1>LAST PAGE</h1>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet enim nobis adipisci quidem aliquam, expedita commodi accusamus perferendis soluta, eum voluptatibus. Consectetur voluptatem, vero sit quae numquam fuga harum, a repudiandae omnis reiciendis. Officia quaerat adipisci iste ex quisquam a temporibus ipsam, quam eum iusto reprehenderit quo alias error consequuntur architecto obcaecati blanditiis corporis accusamus incidunt, recusandae? Optio, hic. Velit nemo nisi sed debitis praesentium eveniet minus temporibus, magnam repellendus natus voluptatibus eos maiores esse laudantium consequatur harum omnis. Unde, sequi! Libero ullam nulla consequuntur temporibus reprehenderit asperiores sequi nam animi culpa fugiat dignissimos ipsa, provident ratione ipsum velit. Mollitia totam, quidem ut impedit qui porro dolores ad itaque, ullam quaerat, autem! Commodi accusantium quae error, maxime dicta ad, rerum nemo nihil beatae eius non magnam! Iure libero rem minus. Earum, quos. Fugiat reiciendis officia, ut magnam consequatur neque ipsam suscipit nobis tempore. Optio expedita dicta voluptatibus dolor, eos veniam. Explicabo repellat eveniet maxime odio tempora excepturi temporibus, nulla, rem impedit quasi provident consectetur debitis, iste voluptatum porro sit dolores ullam iusto a possimus quam quos sunt! Non veritatis praesentium nihil voluptatem incidunt? Explicabo error harum odio, consequatur, vitae nemo esse pariatur commodi! Impedit recusandae quos quo cum ex voluptas iure, beatae esse animi laboriosam sed distinctio facere explicabo. Quis voluptates, rem reprehenderit, quibusdam fugit sit soluta? Ducimus perferendis eum, sapiente dolorem distinctio perspiciatis enim veniam nulla quasi adipisci amet fugit eos odio. Iusto aliquam necessitatibus dolor nihil vitae distinctio totam id obcaecati ipsum reiciendis suscipit, maiores fuga eos quia laboriosam voluptatem illum fugit cumque magni sunt, architecto labore consequatur mollitia expedita! Aperiam alias odit perferendis perspiciatis aut totam, dolor non. Tempore voluptas molestias ut. Maxime ipsa facere dignissimos asperiores vitae dolores mollitia sed minus, eius aperiam expedita, totam id perspiciatis, nesciunt modi numquam autem fugit ratione vel animi eveniet saepe. Soluta doloremque, veniam harum. Cupiditate, hic quisquam sequi. Animi ipsa minima eligendi nesciunt quos officiis nulla ipsam reprehenderit eum non perferendis inventore assumenda consectetur sed magni, vero sunt praesentium numquam ab corrupti aperiam. Reiciendis provident architecto dolore quasi accusantium voluptatum porro velit aperiam vitae soluta laudantium enim blanditiis est, obcaecati cupiditate neque similique eligendi illo quisquam atque magnam nisi ab saepe. Consectetur deserunt voluptatum placeat aut quas. Ab molestiae harum dolor alias a, inventore voluptas officiis dolorem, maiores facere totam cumque dolores excepturi? Ea commodi laboriosam iste maiores, dicta unde! Deserunt ipsum nemo provident ut totam consequatur quod debitis repellendus quia, labore rerum asperiores quisquam quas. Consequuntur assumenda temporibus minus, incidunt repudiandae quia, doloremque nam ut tenetur doloribus voluptatibus ratione quo saepe voluptatem cupiditate nulla. Soluta, quaerat! Quas, repudiandae architecto, totam aspernatur fugit vitae voluptate odit molestiae rerum fuga? Atque architecto, ut. Earum quaerat distinctio totam velit inventore ullam accusamus, quod eius eum sit iusto recusandae sapiente, natus ducimus repellat obcaecati. At perspiciatis possimus repudiandae, quia dolore reprehenderit dicta. Esse illum corporis magni odit, enim aspernatur nulla minima, quisquam explicabo, ipsam molestiae debitis cum blanditiis culpa a voluptatem, non fugit. Nihil velit et nostrum esse aspernatur, temporibus nam dolore.
            </p>
        </div>    
    </div>
    
    
    
    <div class="load">
        <div class="in-wrap">
            <div class="sq"></div>
            <div class="sq"></div>
            <div class="sq"></div>
            <div class="sq"></div>
        </div>         
    </div>
    
    
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    
   <script src="some.js"></script>
  
    
    
</body>
</html>

  function centerify(obje) {
  $ww = $(window).width();
  $wh = $(window).height();
  $ow = obje.outerWidth();
  $oh = obje.outerHeight();
  
  obje.css('left', ($ww - $ow) / 2);
  obje.css('top', ($wh - $oh) / 2);
}

centerify($('.load .in-wrap'));
$(window).resize(function() {
  centerify($('.load .in-wrap'));
});
$('.navi li a').click(function(e) {
  e.preventDefault();
  $id = $(this).attr('id');
  
  $('.navi li a').removeClass('active');
  $(this).addClass('active');
  
  $('.load').slideDown('slow');
  $('.load .in-wrap .sq').addClass('animate');

  setTimeout(function() {
    $('.load .in-wrap .sq').addClass('white');
  }, 500);
  setTimeout(function() {
    
    $('.page').removeClass('active');
    $('.' + $id).addClass('active');
    
    $('.load').slideUp('slow');
  }, 1000);
  
  setTimeout(function() {
    $('.load .in-wrap .sq').removeClass('animate');
    $('.load .in-wrap .sq').removeClass('white');
  }, 1700);
  
 
});

在线演示

让链接同时具备两种打开方式