Тема: Прелоад на одном лишь html
Показать сообщение отдельно

  #3  
Старый 16.07.2019, 05:08
Necessary)
Постоянный
Регистрация: 11.06.2018
Сообщений: 870
С нами: 4170300

Репутация: 118


По умолчанию
Цитата:
Сообщение от Fermin  

Привет, прелоадер можно сделать так:

HTML:





Код:
 -->

#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}

Тут может быть пикча (o-o)

Кукусики


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

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

Цитата:
Сообщение от Fermin  

Привет, прелоадер можно сделать так:

HTML:





Код:
 -->

#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}

Тут может быть пикча (o-o)

Кукусики


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

Архив с HTML и двумя JS я прикрепил к ответу. Удачи
Я не иогу поставить(

Цитата:
Сообщение от Fermin  

Привет, прелоадер можно сделать так:

HTML:





Код:
 -->

#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}

Тут может быть пикча (o-o)

Кукусики


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

Архив с HTML и двумя JS я прикрепил к ответу. Удачи
Я не иогу поставить(
 
Ответить с цитированием