Прелоад на одном лишь html

Статус
В этой теме нельзя размещать новые ответы.
Unnecess4ry

Unnecess4ry

Известный
Автор темы
874
483
Можно-ли такое сделать?
Я запарилмя с этим css и js,гн могу их настроить
 
Решение
Hatrig
Привет, прелоадер можно сделать так:

HTML: 
<!-- Это, вставляешь на страницу, где тебе нужен прелоадер, под <body> -->
<style>
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.canvas{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader-logo{display:block;width:120px;margin-bottom:25px}
.spinner{animation:spinner 1s linear infinite;border:solid 5px transparent;border-top:solid 5px #5d5386;border-radius:100%;width:60px;height:60px;margin:0 auto}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.blockquote{padding:.5rem...
Сортировка по дате Сортировка по голосам
Hatrig

Hatrig

Известный
38
43
Привет, прелоадер можно сделать так:

HTML: 
<!-- Это, вставляешь на страницу, где тебе нужен прелоадер, под <body> -->
<style>
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.canvas{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader-logo{display:block;width:120px;margin-bottom:25px}
.spinner{animation:spinner 1s linear infinite;border:solid 5px transparent;border-top:solid 5px #5d5386;border-radius:100%;width:60px;height:60px;margin:0 auto}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}
</style>

<div id="preloader">
<div class="canvas">
Тут может быть пикча (o-o)
<div class="spinner"></div>   
</div>
</div>
<!-- Конец вставки -->

<!-- тут содержимое странички -->
<center><h1>Кукусики</h1></center>

<!-- Это в конец странички -->
<script src="assets/jquery.min.js"></script>
<script src="assets/app.min.js"></script>

Как работает:
34667


Архив с HTML и двумя JS я прикрепил к ответу. Удачи ;)
 

Вложения

  • preloader.rar
    30.8 KB · Просмотры: 6
  • Нравится
Реакции: Unnecess4ry
Позитивный голос 0 Негативный голос
Решение
Unnecess4ry

Unnecess4ry

Известный
Автор темы
874
483
Fermin написал(а):
Привет, прелоадер можно сделать так:

HTML: 
<!-- Это, вставляешь на страницу, где тебе нужен прелоадер, под <body> -->
<style>
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.canvas{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader-logo{display:block;width:120px;margin-bottom:25px}
.spinner{animation:spinner 1s linear infinite;border:solid 5px transparent;border-top:solid 5px #5d5386;border-radius:100%;width:60px;height:60px;margin:0 auto}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}
</style>

<div id="preloader">
<div class="canvas">
Тут может быть пикча (o-o)
<div class="spinner"></div>  
</div>
</div>
<!-- Конец вставки -->

<!-- тут содержимое странички -->
<center><h1>Кукусики</h1></center>

<!-- Это в конец странички -->
<script src="assets/jquery.min.js"></script>
<script src="assets/app.min.js"></script>

Как работает:
Посмотреть вложение 34667

Архив с HTML и двумя JS я прикрепил к ответу. Удачи ;)
Нажмите для раскрытия...
Опробую.
Fermin написал(а):
Привет, прелоадер можно сделать так:

HTML: 
<!-- Это, вставляешь на страницу, где тебе нужен прелоадер, под <body> -->
<style>
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.canvas{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader-logo{display:block;width:120px;margin-bottom:25px}
.spinner{animation:spinner 1s linear infinite;border:solid 5px transparent;border-top:solid 5px #5d5386;border-radius:100%;width:60px;height:60px;margin:0 auto}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}
</style>

<div id="preloader">
<div class="canvas">
Тут может быть пикча (o-o)
<div class="spinner"></div>  
</div>
</div>
<!-- Конец вставки -->

<!-- тут содержимое странички -->
<center><h1>Кукусики</h1></center>

<!-- Это в конец странички -->
<script src="assets/jquery.min.js"></script>
<script src="assets/app.min.js"></script>

Как работает:
Посмотреть вложение 34667

Архив с HTML и двумя JS я прикрепил к ответу. Удачи ;)
Нажмите для раскрытия...
Я не иогу поставить(
Fermin написал(а):
Привет, прелоадер можно сделать так:

HTML: 
<!-- Это, вставляешь на страницу, где тебе нужен прелоадер, под <body> -->
<style>
#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#fff;z-index:999999}
.canvas{position:absolute;margin:auto;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
.loader-logo{display:block;width:120px;margin-bottom:25px}
.spinner{animation:spinner 1s linear infinite;border:solid 5px transparent;border-top:solid 5px #5d5386;border-radius:100%;width:60px;height:60px;margin:0 auto}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}
</style>

<div id="preloader">
<div class="canvas">
Тут может быть пикча (o-o)
<div class="spinner"></div>  
</div>
</div>
<!-- Конец вставки -->

<!-- тут содержимое странички -->
<center><h1>Кукусики</h1></center>

<!-- Это в конец странички -->
<script src="assets/jquery.min.js"></script>
<script src="assets/app.min.js"></script>

Как работает:
Посмотреть вложение 34667

Архив с HTML и двумя JS я прикрепил к ответу. Удачи ;)
Нажмите для раскрытия...
Я не иогу поставить(
 
Последнее редактирование:
Позитивный голос 0 Негативный голос
Статус
В этой теме нельзя размещать новые ответы.

Похожие темы

  1. pupochocks
    Неактуально Другое [ARZ] Сайт тренировки капчи
      • Нравится
      • Влюблен
    Ответы
    84
    Просмотры
    46K
    Инфа
    Danik2343
    D
  2. R
    • Закрыта
    • Предложение
    Исправлено Не распространять прелоадер на ссылки BlastHack
      • Нравится
    Ответы
    7
    Просмотры
    1K
    Предложения и замечания
    itsLegend
    itsLegend
  3. YarmaK
    • Вопрос
      Адреса памяти читов самп
      • Ха-ха
      • Bug
    Ответы
    4
    Просмотры
    813
    Помощь
    YarmaK
    YarmaK
  4. SIRESMACRO
    MINE HELPER | ARIZONA V | Помощник для шахтеров
      • Нравится
    Ответы
    12
    Просмотры
    4K
    Читы
    diega1337
    diega1337
  5. M
    • Вопрос
      пару вопросов по Moonloader
    Ответы
    1
    Просмотры
    687
    Помощь
    Merzovich
    M
Сверху Снизу