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

Unnecess4ry

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

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

Известный
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

Unnecess4ry

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

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 я прикрепил к ответу. Удачи ;)
Опробую.
Привет, прелоадер можно сделать так:

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 я прикрепил к ответу. Удачи ;)
Я не иогу поставить(
Привет, прелоадер можно сделать так:

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 я прикрепил к ответу. Удачи ;)
Я не иогу поставить(
 
Последнее редактирование: