Анимированный CSS прелоадер для сайта
 | |
| Отличный анимированный прелоадер для сайта, который выполнен на чистом CSS, что предназначен для сайта или приложения при загрузках открытия. Ведь любая страница на интернет сайте не подгружается в доли секунды, для этого нужно небольшое время, чтоб все корректно отображалось. И здесь все можно скрыть, и не отвлекаться, как все будет постепенно загружаться, где подключаем прелоадер, что только появится на то время, что нужно странице для полной загрузки. Если сказать кратко, то основная цель прелоадера, это так можно улучшить впечатление гостей или пользователя о портале или блоге. Где также идет анимация, где выполнена на чистом CSS3, что можно самостоятельно задать свою фигуру, не говоря об оттенке цвета, который здесь присутствует. Так как на каждом элементе идет отдельная палитра, которая выставлена под темный фон страницы. При проверки с demo страницы:  Установка: HTML Код <div class="Loader-scrolling"> <hr/><hr/><hr/><hr/> </div> CSS Код .Loader-scrolling{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); width:100px; height:100px; } .Loader-scrolling hr{border:0;margin:0;width:40%;height:40%;position:absolute;border-radius:50%;animation:spin 2s ease infinite} .Loader-scrolling :first-child{background:#17c5a5;animation-delay:-1.5s} .Loader-scrolling :nth-child(2){background:#ef5350;animation-delay:-1s} .Loader-scrolling :nth-child(3){background:#eca75a;animation-delay:-0.5s} .Loader-scrolling :last-child{background:#31718a} @keyframes spin{ 0%,100%{transform:translate(0)} 25%{transform:translate(160%)} 50%{transform:translate(160%, 160%)} 75%{transform:translate(0, 160%)} } И все это, включая скорость выставляется в прикрепленном CSS стиле, что очень удобно, где не нужны скрипты и различные библиотеки для функциональности. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |