Горячее
Лучшее
Свежее
Подписки
Сообщества
Блоги
Эксперты
0 просмотренных постов скрыто
17

Анимированный прелоадер HTML CSS⁠⁠

Всем привет, новое видео от меня!


Создаем анимированный прелоадер на чистом HTML + CSS. Полностью рабочее решение для твоего будущего сайта, которое можно адаптировать под себя или изменить. Данное решение подойдет под большинство сайтов, где необходим прелоадер. Анимацию можно адаптировать под себя точно также как размер, цвет и форму фигур.


Важно! Это не уроки! Если ты неделю в вебе, то скорей всего ничего не поймешь! У меня нет цели кого-то учить, так как я считаю, что уроков и курсов и так полно на просторах интернета. Я делаю разнообразные задачки для себя в не скучном формате, чтобы всегда была практика и решил поделиться с другими, чтобы была возможность получить готовый код, адаптировать готовое решение под себя или попробовать реализовать тоже самое для практики (практика главное в разработке!). Критика и советы по поводу того, что убрать, что добавить, приветствуются. Также буду рад разбору кода и комментариям по нему.


CodePen: https://codepen.io/crazycoding21/pen/LYyjVWQ

GitHub: https://github.com/CrazyCoding21/CC-HTML-CSS-20-Loading-Anim...

Показать полностью 1
Web Web-программирование HTML CSS Анимация Прелоадер Видео
5

Не хочу спиннер вк⁠⁠

Вас не бесит спиннер в прелоадере вк? Меня бесит.

Аттачи:

и желаемое:

Ответ опечалил:

Жду продолжения.


ПыСы: Такой xyйней ересью я страдаю только когда мне очень скучно. Хотя они иногда веселят.

Показать полностью 3
ВКонтакте Поддержка Спиннер Прелоадер Тикет Гифка
5

Когда ВКонтакте поддерживает хайп⁠⁠

ВК добавили предзагрузчик в im-page--history_loading в виде спиннера

Кому оно вдруг понадобится на сайт или ещё куда, то вот:

В css:

#preloader {

position: fixed;

left: 0;

top: 0;

z-index: 999;

width: 100%;

height: 100%;

overflow: visible;

background: #333 no-repeat center center;

}

.kek{

animation: preloader 1s infinite linear;

display:block;

margin:50%;

}

@keyframes preloader {

to { transform: rotate(360deg); }

}


Скрипт JS:

jQuery(document).ready(function ($) {

$(window).load(function () {

setTimeout(function(){

$('#preloader').fadeOut('slow', function () {

});

},2000);

});

});


В html:

<div id="preloader"><img class="kek" src="http://vk.com/images/svg_icons/fidget_spinner.svg"></div>

<p>EXAMPLE</p>

На выходе будет так:



Непрограммист, еще учусь, кидайте тапками с конструктивом

Показать полностью 1
ВКонтакте Спиннер Прелоадер Хайп Гифка Длиннопост
6
42

Web и все все все: Красивый Preloader на CSS3.⁠⁠

Красивый Preloader на CSS3. Часть 1

Ссылки из урока:

1. Демо: http://master-css.com/demo/preloaderC...

2. Архив-заготовка: http://master-css.com/zip/startlight.rar

3. Источник: https://ihatetomatoes.net/create-css3...

Красивый Preloader на CSS3. Часть 2
Показать полностью 1
Web Css3 Прелоадер Урок Лекция Technobrother Видео
14
Посты не найдены