Блог

Главная - Вопросы по программированию - Как я могу заставить мой загрузчик исчезнуть и правильно отображать мой веб-сайт?

Как я могу заставить мой загрузчик исчезнуть и правильно отображать мой веб-сайт?

#html #css

#HTML #css

Вопрос:

в принципе, я создал загрузчик для своего веб-сайта. Однако я хочу, чтобы мой загрузчик исчез и отображал мой веб-сайт. Прямо сейчас мой загрузчик находится только на веб-сайте. Как я могу заставить свой загрузчик исчезнуть вместе с его контейнером? Я бы хотел, чтобы мой загрузчик исчез следующим образом: http://manangwebsite.rf.gd/?i=1 Вот мой код. Буду признателен за любую помощь. Спасибо.

     body{
        background: #333;
    }
    
    .container{
        position: absolute;
        height: 400px;
        width: 200px;
        top: 20%;
        left: 43%;
    }
    
    .loader{
        height: 95%;
        width: 95%;
        margin: 2.5%;
        border-top: 3px solid #40e0d0;
        border-bottom: 3px solid darkgreen;
        border-radius: 50%;
        animation: 30s rotate linear infinite;
    }
    
    @keyframes rotate{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(810deg);
        }
    }
    
    body{
        text-align: center;
    }
    
    .wrapper{
        width: 1170px;
        margin: 0 auto;
    }
    
    header{
        height: 100px;
        background: #262626;
        width: 100%;
        z-index: 12;
        position: fixed;
    }
    
    .logo{
        width: 30%;
        float: left;
        line-height: 100px;
    }
    
    .logo a{
        text-decoration: none;
        font-size: 30px;
        font-family: bignoodletitling;
        color: #fff;
        letter-spacing: 5px;
    }
    
    nav{
        float: right;
        line-height: 100px;
    }
    
    nav a{
        text-decoration: none;
        font-family: bignoodletitling;
        letter-spacing: 4px;
        font-size: 20px;
        margin: 0 10px;
        color: #fff;
    }
    
    .banner-area{
        width: 100%;
        height: 500px;
        position: fixed;
        top: 100px;
        background-image: url(mountain.jpg);
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center center;
    }
    
    .banner-area h2{
        padding-top: 8%;
        font-size: 70px;
        font-family: poppins;
        text-transform: uppercase;
        color: #fff;
    }
    
    .content-area{
        width: 100%;
        position: relative;
        top: 450px;
        background: #ddd;
        height: 1500px;
    }
    
    .content-area h2{
        font-family: bignoodletitling;
        letter-spacing: 4px;
        padding-top: 30px;
        font-size: 40px;
        margin: 0;
    }
    
    .content-area p{
        padding: 2%;
        font-family: bignoodletitling;
        line-height: 30px;
    }  
     <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Document</title>
    </head>
    <body>
        <div class="container">
            <div class="loader">
              <div class="loader">
                <div class="loader">
                  <div class="loader">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div> 
          
          <div class = "box-area">
            <header>
               <div class="wrapper">
                   <div class="logo">
                       <a href="#">Front Page</a>
                   </div>
                   <nav>
                       <a href="#">Home</a>
                       <a href="#">About</a>
                       <a href="#">Portfolio</a>
                       <a href="#">Blog</a>
                       <a href="#">Contact</a>
                   </nav>
               </div>
            </header>
            <div class="banner-area">
            </div>
            <div class="content-area">
                <div class="wrapper">
                    <h2>Test</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, aspernatur eos, fugit optio vero ratione dolore consequatur suscipit quo nesciunt eveniet ipsam! Necessitatibus, facilis odio? Cupiditate molestiae expedita voluptas atque!</p>
                </div>
            </div>
           </div>
    </body>
    </html>

Ответ №1:

при загрузке в jQuery есть решение — он может видеть фактическое время, затраченное на загрузку содержимого текста и изображений

 $(window).on('load', function() {
  $('.load').delay(3000).fadeOut(1000);
});  
 body{
    background: #333;
}

.container{
    position: absolute;
    height: 400px;
    width: 200px;
    top: 20%;
    left: 43%;
}

.loader{
    height: 95%;
    width: 95%;
    margin: 2.5%;
    border-top: 3px solid #40e0d0;
    border-bottom: 3px solid darkgreen;
    border-radius: 50%;
    animation: 30s rotate linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(810deg);
    }
}

body{
    text-align: center;
}

.wrapper{
    width: 1170px;
    margin: 0 auto;
}

header{
    height: 100px;
    background: #262626;
    width: 100%;
    z-index: 12;
    position: fixed;
}

.logo{
    width: 30%;
    float: left;
    line-height: 100px;
}

.logo a{
    text-decoration: none;
    font-size: 30px;
    font-family: bignoodletitling;
    color: #fff;
    letter-spacing: 5px;
}

nav{
    float: right;
    line-height: 100px;
}

nav a{
    text-decoration: none;
    font-family: bignoodletitling;
    letter-spacing: 4px;
    font-size: 20px;
    margin: 0 10px;
    color: #fff;
}

.banner-area{
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background-image: url(mountain.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.banner-area h2{
    padding-top: 8%;
    font-size: 70px;
    font-family: poppins;
    text-transform: uppercase;
    color: #fff;
}

.content-area{
    width: 100%;
    position: relative;
    top: 450px;
    background: #ddd;
    height: 1500px;
}

.content-area h2{
    font-family: bignoodletitling;
    letter-spacing: 4px;
    padding-top: 30px;
    font-size: 40px;
    margin: 0;
}

.content-area p{
    padding: 2%;
    font-family: bignoodletitling;
    line-height: 30px;
}

.load {
  width: 100%;
  position: fixed;
  height: 100vh;
  z-index: 99;
  overflow: hidden;
  background: #000;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
  <div class="load">
    <div class="container">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
   </div>
      <div class = "box-area">
        <header>
           <div class="wrapper">
               <div class="logo">
                   <a href="#">Front Page</a>
               </div>
               <nav>
                   <a href="#">Home</a>
                   <a href="#">About</a>
                   <a href="#">Portfolio</a>
                   <a href="#">Blog</a>
                   <a href="#">Contact</a>
               </nav>
           </div>
        </header>
        <div class="banner-area">
        </div>
        <div class="content-area">
            <div class="wrapper">
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, aspernatur eos, fugit optio vero ratione dolore consequatur suscipit quo nesciunt eveniet ipsam! Necessitatibus, facilis odio? Cupiditate molestiae expedita voluptas atque!</p>
            </div>
        </div>
       </div>
</body>
</html>

Комментарии:

1. Спасибо! Это помогло.

Ответ №2:

Вы можете сделать этот тип предварительного загрузчика, добавив немного CSS. С помощью функции javascript setTimeout вы можете скрыть предварительный загрузчик

 $(window).on('load', function() {
  $('.load').delay(1500).fadeOut(1000);
});  
 body{
    background: #333;
}

.container{
    position: absolute;
    height: 400px;
    width: 200px;
    top: 20%;
    left: 43%;
}

.loader{
    height: 95%;
    width: 95%;
    margin: 2.5%;
    border-top: 3px solid #40e0d0;
    border-bottom: 3px solid darkgreen;
    border-radius: 50%;
    animation: 30s rotate linear infinite;
}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(810deg);
    }
}

body{
    text-align: center;
}

.wrapper{
    width: 1170px;
    margin: 0 auto;
}

header{
    height: 100px;
    background: #262626;
    width: 100%;
    z-index: 12;
    position: fixed;
}

.logo{
    width: 30%;
    float: left;
    line-height: 100px;
}

.logo a{
    text-decoration: none;
    font-size: 30px;
    font-family: bignoodletitling;
    color: #fff;
    letter-spacing: 5px;
}

nav{
    float: right;
    line-height: 100px;
}

nav a{
    text-decoration: none;
    font-family: bignoodletitling;
    letter-spacing: 4px;
    font-size: 20px;
    margin: 0 10px;
    color: #fff;
}

.banner-area{
    width: 100%;
    height: 500px;
    position: fixed;
    top: 100px;
    background-image: url(mountain.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
}

.banner-area h2{
    padding-top: 8%;
    font-size: 70px;
    font-family: poppins;
    text-transform: uppercase;
    color: #fff;
}

.content-area{
    width: 100%;
    position: relative;
    top: 450px;
    background: #ddd;
    height: 1500px;
}

.content-area h2{
    font-family: bignoodletitling;
    letter-spacing: 4px;
    padding-top: 30px;
    font-size: 40px;
    margin: 0;
}

.content-area p{
    padding: 2%;
    font-family: bignoodletitling;
    line-height: 30px;
}

.load {
  width: 100%;
  position: fixed;
  height: 100vh;
  z-index: 99;
  overflow: hidden;
  background: #000;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="load">
    <div class="container">
        <div class="loader">
          <div class="loader">
            <div class="loader">
              <div class="loader">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div> 
   </div>
      <div class = "box-area">
        <header>
           <div class="wrapper">
               <div class="logo">
                   <a href="#">Front Page</a>
               </div>
               <nav>
                   <a href="#">Home</a>
                   <a href="#">About</a>
                   <a href="#">Portfolio</a>
                   <a href="#">Blog</a>
                   <a href="#">Contact</a>
               </nav>
           </div>
        </header>
        <div class="banner-area">
        </div>
        <div class="content-area">
            <div class="wrapper">
                <h2>Test</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla, aspernatur eos, fugit optio vero ratione dolore consequatur suscipit quo nesciunt eveniet ipsam! Necessitatibus, facilis odio? Cupiditate molestiae expedita voluptas atque!</p>
            </div>
        </div>
       </div>

Комментарии:

1. Однако я хотел бы заменить свой загрузчик на тот, что находится на веб-сайте. Будет ли это работать, если я добавлю свой код загрузчика вместо веб-сайта, на который я ссылался?

2. Я не понимаю, о чем вы говорите, вы можете просто скопировать и вставить мой код в свою рабочую панель

3. @RaymondNelson Да, я думаю, что так и должно быть (я не уверен, поскольку я не автор ответа)

4. @RaymondNelson вы можете протестировать его, запустив фрагмент кода

5. Если вы запустите фрагмент кода, сделайте мой оригинал (тот, который вы отредактировали) Я хочу, чтобы этот загрузчик исчез. Не зеленый. Извините, если я неправильно понял.