• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов » Загрузчик для страниц сайта с помощью CSS (Как создать предварительный загрузчик для сайта)
Загрузчик для страниц сайта с помощью CSS
Kosten
Дата: Воскресенье, 2019-01-20, 23:46 | Сообщение 1
Администраторы
Сообщений:22271
Награды: 56


Если кратко про загрузчик, то это основной компонент для системы, который обеспечивает загрузку, где показывает эффект загрузки, как страниц на сайте, так и скачивание файла. Сама загрузка изначально включает в себя чтение содержимого исполняемого файла, содержащего, что на прямую влияет для выполнение других подготовительных задач.



HTML

Код
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="kasuposegu-linatumag">
                <div id="desabetopeg1" class="fa fa-cog cetamilopag"></div>
                <div id="desabetopeg2" class="fa fa-cog cetamilopag"></div>
                <div id="desabetopeg3" class="fa fa-cog cetamilopag"></div>
            </div>
        </div>
    </div>
</div>


CSS

Код
#kasuposegu-linatumag {
    width: 60px;
    height: 60px;
    margin: auto;
    position: relative;
}
.cetamilopag{ position: absolute; }
#desabetopeg1{
    color: #3A4652;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    top: -20px;
    left: 3px;
    animation: animate-1 1s infinite linear;
}
#desabetopeg2{
    color: #d72f2b;
    font-size: 50px;
    text-align: center;
    height: 50px;
    width: 50px;
    right: -12px;
    animation: animate-2 1s infinite linear;
}
#desabetopeg3{
    color: #3A4652;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    bottom: -10px;
    left: 3px;
    animation: animate-3 1s infinite linear;
}
@keyframes animate-1{
    100% { transform: rotate(-180deg); }
}
@keyframes animate-2{
    100% { transform: rotate(180deg); }
}
@keyframes animate-3{
    100% { transform: rotate(-180deg); }
}


Демонстрация

Здесь представлена загрузка виде шестеренок, где идет в цветной палитре, также под анимацией. Вообщем при переходе вы уведите их, если будет долго будет открываться.
Прикрепления: 2091739.png(7.8 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов » Загрузчик для страниц сайта с помощью CSS (Как создать предварительный загрузчик для сайта)
  • Страница 1 из 1
  • 1
Поиск: