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

[Necessary)]

Можно-ли такое сделать?

Я запарилмя с этим css и js,гн могу их настроить

[Hatrig]

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

HTML:






-->

#preloader{position:fixed;top:0;left:0;right:0;bot tom: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:r otate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}

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

Кукусики





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

https://forum.antichat.xyz/attachments/27369533/

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

[Necessary)]

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

HTML:






-->

#preloader{position:fixed;top:0;left:0;right:0;bot tom: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:r otate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}

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

Кукусики





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

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


Опробую.



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

HTML:






-->

#preloader{position:fixed;top:0;left:0;right:0;bot tom: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:r otate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}

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

Кукусики





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

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


Я не иогу поставить(



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

HTML:






-->

#preloader{position:fixed;top:0;left:0;right:0;bot tom: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:r otate(360deg)}}
.blockquote{padding:.5rem 1rem;margin-bottom:1rem;font-size:.85rem;border-left:.25rem solid #eceeef}

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

Кукусики





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

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


Я не иогу поставить(

[Hatrig]

В чем испытываешь сложность?

[Necessary)]

В чем испытываешь сложность?


Я уже все сделал без прелоада,точнее он есть но его нету)

Спасибо.