Если кратко про загрузчик, то это основной компонент для системы, который обеспечивает загрузку, где показывает эффект загрузки, как страниц на сайте, так и скачивание файла. Сама загрузка изначально включает в себя чтение содержимого исполняемого файла, содержащего, что на прямую влияет для выполнение других подготовительных задач.
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); }
}
Демонстрация
Здесь представлена загрузка виде шестеренок, где идет в цветной палитре, также под анимацией. Вообщем при переходе вы уведите их, если будет долго будет открываться.
