Красивая и простая загрузка с помощью CSS3
Это красиво спроектированный погрузчик, загружающий текст в центр и округлые, красочные линии, вращающиеся вокруг угла на 360 градусов, чтобы создать замкнутый круг. Вращение линий начинается медленно, а затем быстро перемещается, чтобы закончить круг. Код CSS также очень прост и понятен. Он использует правила @keyframe и вращает свойства для поворота строк, чтоб можно было совершить полный оборот. Эта анимация также основана на CSS и использует расширенные функции SCSS для создания этой потрясающей анимации в CSS. Он использует свойство transform для поворота круга и соединения точек. Загрузочный счетчик, это визуальный индикатор того, что что-то происходит на странице. Возможно с несколькими строками JavaScript и небольшой дополнительной разметкой HTML мы можем гарантировать, что пользователям у которых есть нарушения зрения, сообщается, что что-то происходит и когда задача завершена. Мы собираемся использовать анимацию CSS, чтобы наш круг вращался вокруг. Я лично считаю, что синтаксис анимации сложно запомнить, поэтому я использовал MDN в качестве моего справочного руководства. Приступаем к установке: HTML Код <center><br><br><br> <div class="kexamples_rogressbars" id="kexamples_rogressbars"></div> <div class="kexamples_rogressbars" id="kexamples_rogressbars2"></div> <div class="kexamples_rogressbars" id="kexamples_rogressbars3"></div> <div class="kexamples_rogressbars" id="kexamples_rogressbars4"></div> <span id="zukolas">ЗАГРУЗКА...</span><br> CSS Код .kexamples_rogressbars{ border:3px solid #d6336c; width:197px; height:197px; border-radius:50%; border-left-color: transparent; border-right-color: transparent; animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite; } #kexamples_rogressbars2{ border:3px solid #3bc9db; width:220px; height:220px; position:relative; top:-216px; border-left-color: transparent; border-right-color: transparent; animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite; } #kexamples_rogressbars3{ border:3px solid #d6336c; width:240px; height:240px; position:relative; top:-452px; border-left-color: transparent; border-right-color: transparent; animation:rotate 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite; } #kexamples_rogressbars4{ border:3px solid #3bc9db; width:260px; height:260px; position:relative; top:-708px; border-left-color: transparent; border-right-color: transparent; animation:rotate2 2s cubic-bezier(0.26, 1.36, 0.74,-0.29) infinite; } @keyframes rotate{ 0%{transform:rotateZ(-360deg)} 100%{transform:rotateZ(0deg)} } @keyframes rotate2{ 0%{transform:rotateZ(360deg)} 100%{transform:rotateZ(0deg)} } #zukolas{ color:white; font-family:Arial; font-size:19px; position:relative; top:-861px; } Но в нашем случай все создано на чистых стилях. Теперь у вас есть гибкий CSS для создания анимированного загрузчика. С несколькими атрибутами HTML и некоторой копией мы смогли убедиться, что как можно больше пользователей будут проинформированы о загрузке вашего контента и загрузке. Демонстрация |
Поделиться в социальных сетях
Материал разместил
Комментарии: 0 | |