Блог

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

Мой загрузчик работает не так, как ожидалось, анимация не работает

#javascript #html #loader #preloader

#javascript #HTML #загрузчик #предварительный загрузчик

Вопрос:

Хотите создать страницу с загрузчиком и иметь ссылочный URL «https://www.priyaty.com /«. Но почему-то я не могу создать тот же загрузчик, что и приведенная выше ссылка.

Я столкнулся с проблемой, когда применил несколько CSS, но почему-то я не соответствую приведенному выше загрузчику ссылок.

кто-нибудь может мне помочь создать такой же загрузчик? Я использую HTML, CSS и JavaScript

 function counter() {
  var count = setInterval(function() {
    var c = document.getElementById("counter")
    int = parseInt(c.textContent);
    c.textContent = (  int).toString();
    if (int == 100) {
      clearInterval(count);
      c.classList.add("hide");
      document.getElementById("preloader").classList.add("slide-up")
    }
  }, 40)
}
counter(); 
 .preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

.preloader .preloaderp {
  font-size: 5em;
  font-weight: bold;
  color: rgba(255, 255, 255, .05);
  position: absolute;
  padding: 15px;
  text-align: center;
  text-transform: uppercase;
}

.preloader.slide-up {
  height: 0px;
  transition: .5s;
  transition-delay: 1s;
  font-size: 0px;
}

.counter {
  font-size: 5em;
  color: #fff;
  font-weight: bold;
}

.counter.hide {
  opacity: 0;
  transition: 1s;
}

.counter::after {
  content: "%";
  font-size: .5em;
}

@media only screen and (max-width: 575px) {
  .preloaderp {
    font-size: 2em;
  }

  .counter {
    font-size: 2em;
  }
} 
 <div class="preloader" id="preloader">
    <p class="preloaderp">Loading</p>
    <div class="counter" id="counter">
        0
    </div>
</div>

Ответ №1:

Вы искали это?

 var counting = setInterval(function() {
  var loader = document.getElementById("loader");
  var currval = parseInt(loader.innerHTML);
  var Width = 100 - currval;
  var loadscreen = document.getElementById("loadscreen");
  loader.innerHTML =   currval;
  if (currval === 100) {
    clearInterval(counting);
    loadscreen.style.display = "none";
  }
  loadscreen.style.transition = "0.1s";
  loadscreen.style.width = Width   "%";
}, 10); 
 .loading-screen {
  width: 100%;
  height: 100%;
}

.loader {
  font-size: 50px;
  font-family: Arial;
  position: fixed;
  left: 45%;
  z-index: 1000;
  color: red;
}

.loader:after {
  content: " %";
  font-size: 100%;
}

.after-load {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  text-align: center;
  border: none;
} 
 <div class="loading-screen"></div>
<div class="after-load" id="loadscreen">
  <div class="loader" style="top: 50%;" id="loader">0</div>
</div>

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

1. Это то же самое, но я хочу то же самое, что и priyaty.com

2. Я думаю, что эта скрипка должна работать: https://jsfiddle.net/oxyg7s1h /

3. Спасибо! Это то, что я хочу .. но теперь отсутствует только ввод и вывод текста (100% и приветствие), анимация отсутствует, я изучаю это, но если вы можете мне помочь, это будет для меня проблемой .. но спасибо, приятель, оценит ваши усилия.

4. Я пытался, но, к сожалению, не смог применить анимацию.

5. Не могли бы вы помочь мне с анимированным текстом @Happy_Coder, я пытался, но не преуспел.