LoveHate Опубликовано: 29 июля 2020 Поделиться Опубликовано: 29 июля 2020 hi everybody how can I add a preloader on my forum? Ссылка на комментарий
Решение Sipsb Опубликовано: 29 июля 2020 Решение Поделиться Опубликовано: 29 июля 2020 Preloader in the form of an animated svg icon 1. Create the HTML markup for the preloader and place it immediately after the opening body tag: <div class="preloader"> <svg class="preloader__image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"> </path> </svg> </div> Any other image can be used as svg. 2. Add Custom.css: .preloader { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; /* background color */ background: #e0e0e0; z-index: 1001; } .preloader__image { position: relative; top: 50%; left: 50%; width: 70px; height: 70px; margin-top: -35px; margin-left: -35px; text-align: center; animation: preloader-rotate 2s infinite linear; } @keyframes preloader-rotate { 100% { transform: rotate(360deg); } } .loaded_hiding .preloader { transition: 0.3s opacity; opacity: 0; } .loaded .preloader { display: none; } 3. Let's put the following script in the globalTemplate before </body>: <script> window.onload = function () { document.body.classList.add('loaded_hiding'); window.setTimeout(function () { document.body.classList.add('loaded'); document.body.classList.remove('loaded_hiding'); }, 500); } </script> 2020-07-29_10-11-36.mp4 1 Ссылка на комментарий
LoveHate Опубликовано: 29 июля 2020 Автор Поделиться Опубликовано: 29 июля 2020 thank you Ссылка на комментарий
Рекомендованные сообщения
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Зарегистрировать аккаунтВойти
Уже зарегистрированы? Войдите здесь.
Войти сейчас