(Sztuczny) Ekran ładowania dla strony WWW (PHP/JS)

pytanie zadane 30 marca 2022 w HTML i CSS przez Dynks1 Początkujący (350 p.)

Cześć,
Chciałbym zrobić ekran startowy dla mojej chmury internetowej, której tylko tego brakuje do ideału.
I nie chodzi mi o ekran ładowania, bo sama strona nie ma co się ładować, tylko o jakby sztuczny ekran wczytywania, by zrobić poczucie
profesjonalizmu :> bo wiadomo, że jak zamiast zwykłego załadowania strony będzie na początku coś w stylu "Inicjalizacja, deszyfrowanie" :]
A no i zależy mi, bym dał radę dać tam jakiegoś gifa i tekst.

PS. Technicznie wiem jak to zrobić, jednak w ogóle nie mam pomysłu.

Pzdr.

komentarz 31 marca 2022 przez VBService Ekspert (253,400 p.)

Od czasu do czasu pojawiały się tutaj podobne pytania i "pozostało po nich" np.

<body>
  <div class="load-page-modal">
    <div class="load-page-modal-content">
      <span class="load-page-modal-message"></span>
      <span class="load-page-modal-message-dots"></span>
    </div>
  </div>

  <!-- Reszta kodu strony -->
  <p><h3>Czym jest Lorem Ipsum?</h3>
  Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>

<p><h3>Do czego tego użyć?</h3>
Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>

<p><h3>Skąd się to wzięło?</h3>
W przeciwieństwie do rozpowszechnionych opinii, Lorem Ipsum nie jest tylko przypadkowym tekstem. Ma ono korzenie w klasycznej łacińskiej literaturze z 45 roku przed Chrystusem, czyli ponad 2000 lat temu! Richard McClintock, wykładowca łaciny na uniwersytecie Hampden-Sydney w Virginii, przyjrzał się uważniej jednemu z najbardziej niejasnych słów w Lorem Ipsum – consectetur – i po wielu poszukiwaniach odnalazł niezaprzeczalne źródło: Lorem Ipsum pochodzi z fragmentów (1.10.32 i 1.10.33) „de Finibus Bonorum et Malorum”, czyli „O granicy dobra i zła”, napisanej właśnie w 45 p.n.e. przez Cycerona. Jest to bardzo popularna w czasach renesansu rozprawa na temat etyki. Pierwszy wiersz Lorem Ipsum, „Lorem ipsum dolor sit amet...” pochodzi właśnie z sekcji 1.10.32.</p>

<p>Standardowy blok Lorem Ipsum, używany od XV wieku, jest odtworzony niżej dla zainteresowanych. Fragmenty 1.10.32 i 1.10.33 z „de Finibus Bonorum et Malorum” Cycerona, są odtworzone w dokładnej, oryginalnej formie, wraz z angielskimi tłumaczeniami H. Rackhama z 1914 roku.</p>

<p><h3>Skąd to wziąć?</h3>
Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym generatorem w Internecie. Używamy zawierającego ponad 200 łacińskich słów słownika, w kontekście wielu znanych sentencji, by wygenerować tekst wyglądający odpowiednio. To wszystko czyni „nasz” Lorem Ipsum wolnym od powtórzeń, humorystycznych wstawek czy niecharakterystycznych słów.</p>
</body>

@charset "UTF-8";

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.load-page-modal {
  display: block;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.91);
}
.load-page-modal-content {
  margin: 0;
  padding: 1.5em;
  width: 80vw;
  height: 60vh;
  background-color: rgba(1,1,1,0.99);
  background-repeat: no-repeat;
  background-origin: border-box;
  color: limegreen;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.load-page-modal-message {
  font-family: "Lucida Console", monospace;
  font-size: 1.4em;  
  border: 0;
  background-color: rgba(1,1,1,0.79);
}
.load-page-modal-message-dots {
  font-family: "Lucida Console", monospace;
  font-size: 1.6em;
  padding-left: 0.2em;
  background-color: rgba(1,1,1,0.79);
}
.load-page-modal-message-dots:after {
  content: '';
  animation: blinking_dots 1.5s 1.1s infinite;
}
@keyframes blinking_dots {
   0% { content: ''; }
  20% { content: '.'; }
  40% { content: '..'; }
  60% { content: '...'; }
  80% { content: '....'; }
}
.load-page-modal-message-connected {
  font-size: 1.6em;
  padding: 1em;
  border: 2px solid limegreen;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: tick_movement 1.2s infinite;
}
@keyframes tick_movement {
    0% { transform: translate(-50%, -52%); }
   20% { transform: translate(-50%, -50%); }
   40% { transform: translate(-50%, -53%); }
   60% { transform: translate(-50%, -50%); }
   80% { transform: translate(-50%, -48%); }
  100% { transform: translate(-50%, -50%); }
}
.img-load-page-modal-1 {
  background: url('https://www.psd-dude.com/tutorials/matrix-effect-animation-gif-photoshop-tutorial/matrix-rain-effect-animation-photoshop-editor.gif');
}
.img-load-page-modal-2 {
  background: url('https://media.giphy.com/media/12W5Sg2koWYnwA/giphy.gif');
}
.img-load-page-modal-3 {
  background: url('https://media.giphy.com/media/l3mZnuz4coJp8EBBm/giphy.gif');
}
.hide-modal {
  display: none;
}
body {
  color: gray;
}

const modal_container = document.querySelector('.load-page-modal'),
      modal_content = document.querySelector('.load-page-modal-content'),
      modal_message = document.querySelector('.load-page-modal-message'),
      modal_message_dots = document.querySelector('.load-page-modal-message-dots');

//const random = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; }
//modal_content.classList.add(`img-load-page-modal-${random(1, 3)}`);
modal_content.classList.add('img-load-page-modal-1');

let message = '', counter = 0;
const id_interval = setInterval(() => {
  switch(counter) {
    case 0: // zero sekund
      message = 'Verifying IP';
      break;
    case 5: // po 5 sekundach
      message = 'Checking location';
      break;
    case 10: // po 10 sekundach      
      modal_message_dots.classList.remove('load-page-modal-message-dots');
      message = 'Connected';
      modal_message.classList.add('load-page-modal-message-connected');
      break;
    case 15: // po 15 sekundach
      modal_container.classList.add('hide-modal');
      clearInterval(id_interval);
      break;
  }

  counter++;
  modal_message.textContent = message; 
}, 1000);

komentarz 31 marca 2022 przez VBService Ekspert (253,400 p.)
edycja 31 marca 2022 przez VBService

lub coś w stylu "retro" konsoli , może te przykłady będą dla Ciebie pomocne (jakiś pomysł "podrzucą")

<div class="console"></div>

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  border: 0;
}
.console {
  width: 90vw;
  height: 60vh;
  margin: 1em auto;
  padding: 1em;
  border-radius: 0.25em;
  box-shadow: 0 0 2px 2px silver;
  background-color: black;
  background-image: radial-gradient(rgba(255, 255, 255, 0.245), rgba(255, 255, 255, 0)), 
                    linear-gradient(to bottom, black, black 2px, rgba(17, 17, 17, 0.95) 3px);
  background-repeat: repeat-y;
  background-position: center center;
  background-size: cover, 100% 3px;
}
.console .cmd-text {
  color: #1ff042;
  display: block;
  font-family: monospace;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 1.225em;
  letter-spacing: 0.15em;
  text-shadow: 1px 1px 2px green, 1px 2px 4px limegreen, 1px 2px 4px green;
  padding-bottom: 0.5em;
}
.console .cmd-line::before {
  content: '>';
  padding-right: 0.5em;
  color: yellow;
}
.console .cmd-line::after {
  content: '';
  display: inline-block;
  vertical-align: -0.15em;
  width: 0.75em;
  height: 1em;
  margin-left: 5px;
  background: #1ff042;
  opacity: 1;
  box-shadow: 1px 1px 1px rgba(31, 240, 66, 0.65),
             -1px -1px 1px rgba(31, 240, 66, 0.65),
              1px -1px 1px rgba(255, 240, 66, 0.65),
             -1px 1px 1px rgba(31, 240, 66, 0.65);
  -webkit-animation: cursor-blink 1.15s infinite;
  -moz-animation: cursor-blink 1.15s infinite;
  animation: cursor-blink 1.15s infinite;
}
@keyframes cursor-blink {
  from { opacity: 1; }
  20%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  60%  { opacity: 0; }
  70%  { opacity: 1; }
    to { opacity: 1; }
}

wersja 1a.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function writeOnConsole() {
  const cmd_text = [
    'Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.',
    'Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.',
    'Pięć wieków później zaczął być używany w przemyśle elektronicznym, pozostając praktycznie niezmienionym.',
    'Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum.'
  ];

  const board = document.querySelector('.console');
  await sleep(1000);


  for (let i=0; i<cmd_text.length; ++i) {
    const span = document.createElement('span');
    span.setAttribute('class', 'cmd-line cmd-text');

    board.appendChild(span);
    await sleep(1000);

    for (let j=0; j<cmd_text[i].length; ++j) {
      span.textContent += cmd_text[i][j];
      await sleep(32);
    }

    await sleep(700);
    if (i<cmd_text.length - 1) {
      span.classList.remove('cmd-line');
      span.classList.add('cmd-line-enter');
    }
  }
}

window.onload = () => {
  writeOnConsole();
}

wersja 1b.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function writeOnConsole() {
  const cmd_text = [
    'Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym.',
    'Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki.',
    'Pięć wieków później zaczął być używany w przemyśle elektronicznym, pozostając praktycznie niezmienionym.',
    'Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum.',
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
  ];

  const board = document.querySelector('.console');
  await sleep(1000);


  for (let i=0; i<=cmd_text.length; ++i) {
    const span = document.createElement('span');
    span.setAttribute('class', 'cmd-line cmd-text');
    board.appendChild(span);

    if (i < cmd_text.length) {
      await sleep(1000);

      for (let j=0; j<cmd_text[i].length; ++j) {
        span.textContent += cmd_text[i][j];
        await sleep(32);
      }

      await sleep(700);
      if (i<cmd_text.length) {
        span.classList.remove('cmd-line');
        span.classList.add('cmd-line-enter');
      }
    }
  }
}

window.onload = () => {
  writeOnConsole();
}