[Front-end] Preloader на сайт

unknown1 · 10 Сен 2018

index.html

HTML:

<html>
     <head>
          <meta charset="utf-8">
          <link rel="stylesheet" href="styles.css">
     </head>
     <body>
          <div class="preloader"><div></div></div>
     </body>
     <script src="jQuery.js"></script>
     <script type="text/javascript">
          $(document).ready(function(){
               $(".preloader").fadeOut(250);
          });
     </script>
</html>

STYLE.CSS

Код:

* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
body {
     background-color: #fff;
}
.preloader {
     position: fixed;
     z-index: 10;
     min-width: 100%;
     min-height: 100%;
     left: 0;
     top: 0;
}
.preloader > div {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     animation: 1s animate linear infinite;
     background-color: #2ecc7;
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
}

@keyframes animate {
     0% {
          box-shadow: 0 0 0 0 #2ecc71;
     }
     100% {
          box-shadow: 0 0 1px 10px transparent;
     }
}

1) Стандартный шаблон html разметки.
2) Подключение css стилей и js скриптов.
3) В стилях небольшая анимация.
4) работа скрипта - при готовности всей страницы убирается фиксированный блок.

Если есть ошибки - исправьте, писалось с телефона, поэтому ошибки точно должны быть.

dalonyet · 10 Сен 2018

MoloF написал(а):
index.html

HTML:

<html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="preloader"><div></div></div> </body> <script src="jQuery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".preloader").fadeOut(250); }); </script> </html>

STYLE.CSS

Код:

* { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #fff; } .preloader { position: fixed; z-index: 10; min-width: 100%; min-height: 100%; left: 0; top: 0; } .preloader > div { width: 100px; height: 100px; border-radius: 50%; animation: 1s animate linear infinite; background-color: #2ecc7; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes animate { 0% { box-shadow: 0 0 0 0 #2ecc71; } 100% { box-shadow: 0 0 1px 10px transparent; } }

1) Стандартный шаблон html разметки.
2) Подключение css стилей и js скриптов.
3) В стилях небольшая анимация.
4) работа скрипта - при готовности всей страницы убирается фиксированный блок.

Если есть ошибки - исправьте, писалось с телефона, поэтому ошибки точно должны быть.

1. Может jQuery через CDN подключишь, или ссылку на него дашь?
2.

Пожалуйста, авторизуйтесь для просмотра ссылки.

(добавил чуть текста, чтоб подольше загружалась страница, т.к. это прелоадер)

unknown1 · 10 Сен 2018

Рhysic написал(а):
Может jQuery через CDN подключишь

Ни в одном из своих проектов я не использую внешнее подключение стилей/скриптов.

Рhysic написал(а):
ссылку на него дашь?

Думаю найти библиотеку jQuery.js сможет любой :^

Рhysic написал(а):
(добавил чуть текста, чтоб подольше загружалась страница, т.к. это прелоадер)

Пожалуйста, авторизуйтесь для просмотра ссылки.

Немного добавил задержки и пофиксил окраску кружка.