選擇語言Bahasa Indonesia (Bahasa Indonesia)Bahasa Malaysia (Malay)Čeština (Czech)Dansk (Danish)Deutsch (German)English (English)Español (Spanish)繁體中文 (Chinese (Traditional))Français (French)한국어 (Korean)Italiano (Italian)简体中文 (Chinese (Simplified))Nederlands (Dutch)日本語 (Japanese)Norsk (Norwegian)Polski (Polish)Português (Portuguese)Română (Romanian)Русский (Russian)Svenska (Swedish)Tagalog (Tagalog)ภาษาไทย (Thai)Türkçe (Turkish)العربية (Arabic)
عفواً، لم نتمكن من العثور على الصفحة التي تبحث عنها. برجاء المحاولة مرة أخرى للصفحة السابقة أو الانتقال لـمركز المساعدة للمزيد من المعلومات
الإنتقال لموجزك الرئيسيOmlouváme se, nemůžeme najít stránku, kterou hledáte. Zkuste se vrátit zpátky na předchozí stránku, nebo se podívejte do našeho Centra nápovědy pro více informací
Přejít do informačního kanáluVi kan desværre ikke finde den side, du leder efter.
Gå tilbage til den forrige side, eller besøg Hjælp for at få flere oplysninger Gå til dit feedDie gewünschte Seite konnte leider nicht gefunden werden. Versuchen Sie, zur vorherigen Seite zurückzukehren, oder besuchen Sie unseren Hilfebereich, um mehr zu erfahren.
Zu Ihrem FeedUh oh, we can’t seem to find the page you’re looking for. Try going back to the previous page or see our Help Center for more information
Go to your feedVaya, parece que no podemos encontrar la página que buscas. Intenta volver a la página anterior o visita nuestro Centro de ayuda para más información.
Ir a tu feedNous ne trouvons pas la page que vous recherchez. Essayez de retourner à la page précédente ou consultez notre assistance clientèle pour plus d’informations
Ouvrez votre filMaaf, sepertinya kami tidak dapat menemukan halaman yang Anda cari.
Coba kembali ke halaman sebelumnya atau lihat Pusat Bantuan kami untuk informasi lebih lanjut Buka feed AndaNon abbiamo trovato la pagina che stai cercando. Prova a tornare alla pagina precedente o visita il nostro Centro assistenza per saperne di più.
Vai al tuo feed申し訳ありません。お探しのページが見つかりません。前のページに戻るか、ヘルプセンターで詳細をご確認ください
フィードに移動원하시는 페이지를 찾을 수 없습니다. 이전 페이지로 돌아가거나 고객센터에서 자세히 알아보세요.
홈으로 가기Harap maaf, kami tidak dapat menemui laman yang ingin anda cari. Cuba kembali ke laman sebelumnya atau lihat Pusat Bantuan kami untuk maklumat lanjut
Pergi ke suapanDe pagina waar u naar op zoek bent, kan niet worden gevonden. Probeer terug te gaan naar de vorige pagina of bezoek het Help Center voor meer informatie
Ga naar uw feedVi finner ikke siden du leter etter.
Gå tilbake til forrige side eller besøk vår brukerstøtte for mer informasjon Gå til din feedNie możemy znaleźć strony, której szukasz. Spróbuj wrócić do poprzedniej strony lub nasze Centrum pomocy, aby uzyskać więcej informacji
Przejdź do swojego kanałuA página que você está procurando não foi encontrada. Volte para a página anterior ou visite nossa Central de Ajuda para mais informações
Voltar para seu feedNe pare rău, nu găsim pagina pe care o căutaţi. Reveniţi la pagina anterioară sau consultaţi Centrul nostru de asistenţă pentru mai multe informaţii
Accesaţi fluxul dvs.Не удаётся найти искомую вами страницу. Вернитесь на предыдущую страницу или посетите страницу нашего справочного центра для получения дополнительной информации.
Перейти к лентеSidan du letar efter hittades inte.
Gå tillbaka till föregående sida eller besök vårt Hjälpcenter för mer information Gå till ditt nyhetsflödeขออภัย ดูเหมือนเราไม่พบหน้าที่คุณกำลังมองหาอยู่ ลองกลับไปที่หน้าเพจก่อน หรือดู ศูนย์ความช่วยเหลือ ของเราสำหรับข้อมูลเพิ่มเติม
ไปที่ฟีดของคุณNaku, mukhang hindi namin mahanap ang pahina na hinahanap mo. Subukang bumalik sa nakaraang pahina o tingnan ang aming Help Center para sa higit pang impormasyon
Pumunta sa iyong feedAradığınız sayfa bulunamadı. Önceki sayfaya geri dönün veya daha fazla bilgi için Yardım Merkezimizi görüntüleyin
Haber akışınıza gidin抱歉，无法找到页面。试试返回到前一页，或前往帮助中心了解更多信息
前往动态汇总我們好像找不到該頁面。請回到上一頁或前往說明中心來進一步瞭解
前往首頁動態20 удивительных индикаторов выполнения CSS [с примерами]
Независимо от того, загружаете ли вы что-либо или загружаете что-либо, или даже ожидаете завершения какого-либо прогресса, рекомендуется сообщать пользователям, что происходит с анимацией индикатора выполнения CSS.
Никто не любит, когда страница зависает, когда что-то происходит в фоновом режиме. Обратная связь о прогрессе очень важна для пользовательского опыта. Особенно в Интернете, так как некоторые пользователи просто уйдут, если посчитают, что ваша страница не работает.
Индикатор выполнения CSS — отличный способ сообщить пользователю, что происходит и сколько времени это занимает. Эти индикаторы выполнения должны быть в режиме реального времени и обновляться без каких-либо зависаний или задержек, иначе это может отпугнуть пользователей от низкой производительности.
Для чего можно использовать индикатор выполнения?
Существует несколько различных ситуаций, когда полоса загрузки CSS может быть полезна. . Основная цель — предоставить пользователям обратную связь и поддерживать их в актуальном состоянии.
- Загрузка файла: Как и на YouTube, когда вы загружаете видеофайл, он дает вам обратную связь о том, сколько времени потребуется для загрузки и где он находится от 0% до 100%.
Это держит пользователя в курсе. - Загрузка файла: Когда вы загружаете файл из Интернета, очень важно понимать, какой объем загружается и сколько времени это займет, предоставляя пользователю обратную связь в режиме реального времени.
- Метрики: Другое использование индикаторов выполнения — отображение метрик. Возможно, вы захотите отобразить количество принятых по электронной почте приглашений на индикаторе выполнения. Это помогает визуализировать данные.
- Установки или обновления: Хорошо указать, сколько времени займет установка или обновление. Фоновые процессы не совсем видны пользователю, поэтому вы должны сообщить им, что происходит.
Это держит пользователя в курсе.20 удивительных примеров индикатора выполнения CSS
Я подготовил несколько замечательных примеров индикатора выполнения HTML и CSS . Они просты в использовании и быстро интегрируются на ваш сайт. Надеюсь, они вдохновят вас начать работу и, возможно, выбрать тот, который вам больше всего нравится, и использовать его.
1. Индикатор выполнения Swiper
См. перо на КодПене.
Предварительный просмотр
Если вы используете Swiper (одну из лучших каруселей jQuery), вы можете использовать для него этот полноразмерный индикатор выполнения.
Указывает зрителю, когда произойдет автопрокрутка. Очень часто встречается в слайдерах героев.
Если вам нравятся полноэкранные дизайны, ознакомьтесь с fullPage.js. Он позволяет создавать полностраничные прокручиваемые веб-страницы, которые скользят. Также доступно для WordPress для разработчиков Elementor и Gutenberg.
2. Простой компонент панели загрузки CSS
См.
Предварительный просмотр
Простой и эффектный пример индикатора выполнения и того, как он может выглядеть на хорошем фоне. Он не использует внешние зависимости и предоставляет простой в использовании JavaScript API.
3. Индикатор выполнения при прокрутке
См. перо на КодПене.
Предварительный просмотр
Эта анимация индикатора выполнения CSS отлично подойдет для сообщений в блогах или длинных статей, показывая пользователю, как далеко он продвинулся на странице.
Вы можете прочитать нашу статью о том, как создавать анимацию CSS при прокрутке, чтобы лучше понять основы этой анимации индикатора выполнения CSS.
4. Изменение цвета индикатора выполнения загрузки
См.
перо
на КодПене.
Предварительный просмотр
Хороший пример простого, но современного индикатора загрузки CSS. Он также меняет цвет в зависимости от своего прогресса.
В этом примере используется компонент GSAP от GreenStock.
5. Круглые индикаторы выполнения (чистый CSS)
См. перо на КодПене.
Предварительный просмотр
Если вы ищете круглую полосу прогресса, эти выглядят довольно современно и минималистично. Здесь не используется JavaScript, и для создания полос загрузки используется только CSS.
6. Индикаторы выполнения Simple Clean
См. перо на КодПене.
Предварительный просмотр
Простые и понятные индикаторы выполнения CSS.
7. Анимированные круглые индикаторы выполнения
См. перо на КодПене.
Предварительный просмотр
Простые и эффективные круглые индикаторы выполнения, созданные только с помощью CSS. Они анимируются при загрузке страницы, поскольку используют анимацию ключевых кадров CSS. Однако, немного поработав с JavaScript, вы сможете адаптировать его и анимировать по требованию.
8. Пошаговый индикатор выполнения JavaScript и CSS
См. перо на КодПене.
Предварительный просмотр
Если вы хотите узнать, как соединить CSS с JavaScript, чтобы создать очень динамичную полосу загрузки CSS, это хороший пример для обучения.
В отличие от других индикаторов выполнения, этот поддерживает несколько шагов. Идеально подходит для длительных процессов или процессов с несколькими задачами, которые мы можем отслеживать. Это обеспечивает более реалистичную обратную связь.
9. Круглая полоса прогресса с цифрами
См. перо на КодПене.
Предварительный просмотр
Простой круговой индикатор выполнения только с помощью CSS с центрированными процентными числами. Этот индикатор выполнения не будет включать анимацию, но его можно легко добавить при загрузке страницы, добавив анимацию ключевого кадра.
Идеально подходит для демонстрации навыков в онлайн-портфолио веб-разработчика.
10. Простой динамический индикатор выполнения
См.
перо
на КодПене.
Предварительный просмотр
Простой динамический индикатор выполнения с CSS-анимацией для обучения. Он использует немного JavaScript и jQuery для генерации процента и запуска анимации. Таким образом, мы можем запускать анимацию, когда захотим, а не только во время загрузки страницы.
11. Анимированный индикатор выполнения с процентом
См. перо на КодПене.
Предварительный просмотр
Прикольный анимированный и пронумерованный индикатор выполнения. Это не только CSS, он использует одну команду JS (функция RegisterProperty) для выполнения всей работы. Он даже использует небольшую иконку, которую можно изменить по своему усмотрению.
12. Чистый HTML и CSS Индикатор выполнения шага
См.
перо
на КодПене.
Предварительный просмотр
Эта панель позволяет вам выбрать пошаговые проценты для заполнения анимированного индикатора выполнения CSS. Цвет меняется в зависимости от уровня. Для этого использовались только HTML и CSS, что довольно удивительно, учитывая, что он реагирует на события щелчка!
13. CSS-анимированный индикатор выполнения со значком
См. перо на КодПене.
Предварительный просмотр
Хотите добавить значок прямо в индикатор состояния? Это хороший пример того, как вы можете создать анимированный индикатор выполнения CSS, а также использовать значок.
14. Анимированная загрузка файла Панель загрузки CSS
См. перо
на КодПене.
Предварительный просмотр
У вас есть система загрузки файлов? Тогда этот пример идеален для вас. Он покажет индикатор выполнения сразу после того, как вы отправите файл для загрузки.
15. Шаговый индикатор прогресса
См. перо на КодПене.
Предварительный просмотр
Интересный дизайн анимации индикатора выполнения CSS. Это может быть полезно для целевой страницы заказа продукта и т. д.
16. Индикатор выполнения с поддержкой JavaScript
См. перо на КодПене.
Предварительный просмотр
Пример чистого JavaScript без внешних компонентов и зависимостей. Вы можете иметь полный контроль над тем, когда вы хотите запустить анимацию.
Что обычно невозможно с решениями только для CSS. Кроме того, вы также получаете процентное число.
Статья по теме: Примеры красивого нижнего колонтитула веб-сайта
17. Шаблон формы с индикатором выполнения
См. перо на КодПене.
Предварительный просмотр
Более сложный пример того, как индикатор выполнения CSS может использоваться с несколькими элементами HTML и для продвижения пользователя по странице регистрации/регистрации. Полезно учиться.
18. Индикатор выполнения с пользовательскими свойствами CSS
См. перо на КодПене.
Предварительный просмотр
Этот пример запускает анимацию всякий раз, когда мы перемещаем мышь.
Конечно, это полностью настраивается и предназначено только для демонстрации анимации индикатора выполнения.
Он не использует зависимостей и имеет красивый дизайн. Он использует пользовательские свойства CSS, чтобы связать часть JS с частью CSS.
19. Список индикаторов выполнения Bootstrap
См. перо на КодПене.
Предварительный просмотр
Если вы используете Bootstrap и ищете целый ряд индикаторов выполнения (CSS), это отличный пример того, как их можно использовать.
Легко и просто! Они не анимированы, но могут пригодиться во многих сценариях.
20. Индикаторы выполнения на основе дуги CSS
См. перо на КодПене.
Предварительный просмотр
Отличная анимация индикатора выполнения CSS для отображения метрик или данных, которые не меняются слишком часто.
Никаких внешних зависимостей и использование только CSS .
Заключительные мысли
Мы узнали, что такое индикаторы выполнения CSS, почему они полезны и когда их использовать. В этой статье основное внимание уделялось демонстрации готовых к использованию примеров и объяснению, почему индикаторы выполнения являются обязательными в любом реактивном и динамическом веб-приложении.
Вы можете вдохновиться любым из приведенных здесь примеров и, возможно, даже использовать его для своего собственного проекта. И, если вы хотите создать его самостоятельно, помните, что у нас также есть руководство о том, как сделать свой собственный индикатор выполнения.
Другие статьи, которые могут быть вам интересны.
- Классные CSS-анимации для вашего сайта
- Примеры временных шкал HTML и CSS
- Великолепные эффекты анимации текста CSS
- Примеры тумблеров Pure CSS
- Красивые закругленные кнопки CSS
Об авторе:
Люк Эмбри — разработчик полного стека, бакалавр компьютерных наук, проживающий в Великобритании.
Подробнее о нем можно узнать на https://lukeembrey.com/
сообщить об этом объявлении
сообщить об этом объявлении
28 индикаторов выполнения CSS
Коллекция отобранных бесплатных примеров кода HTML и CSS индикатора выполнения . Обновление коллекции января 2020 года. 10 новых предметов.
- Индикаторы выполнения Bootstrap
- Индикаторы выполнения JavaScript
- Индикаторы выполнения jQuery
- Индикаторы выполнения React
- Индикаторы прогресса попутного ветра
- Индикаторы выполнения Vue
О коде
Прогресс
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Фиолетовая полоса прогресса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Пиксельная полоса прогресса
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Изменение цвета индикатора загрузки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Индикатор выполнения SVG Circle
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: нет
Зависимости: —
С код
Индикатор выполнения SVG Circle
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Круговой прогресс CSS
Круговой индикатор выполнения, созданный с использованием CSS conic-gradient и пользовательских свойств.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Отвечает: да
Зависимости: —
О коде
Индикатор выполнения цели Github
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Предупреждающая планка
CSS-анимации, переменных и градиентов для создания прокручиваемой панели предупреждений.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Полоса прокрутки прогресса Только CSS
Совместимые браузеры: Chrome, Edge, Opera, Safari
Ответ: да
Зависимости: —
О коде
Простой индикатор выполнения
Простой индикатор выполнения CSS с анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: —
О коде
Только анимация загрузки CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.
css
О коде
Индикатор выполнения Pure CSS
Интерактивный Индикатор выполнения Чистый CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Индикаторы выполнения анимации
Индикаторы выполнения с анимацией CSS .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Индикаторы выполнения CSS
УС индикаторы выполнения , сделанные с помощью шаблонов svg.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Ступенчатая полоса прогресса
Ступенчатый индикатор выполнения с небольшим JS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Индикатор выполнения
Индикатор выполнения HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Чтение панели прогресса только CSS
Поэкспериментируйте с новым значением свойства позиции CSS, чтобы создать индикатор выполнения чтение статей без необходимости использования PHP или JavaScript, только HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Загрузочная планка
Красивая полоса загрузки HTML, CSS и JS с изображением gif.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Радужный индикатор прогресса
Чистый CSS и HTML Индикатор выполнения , с использованием повторяющегося линейного градиента .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Легкая прогресс-бар
HTML и CSS анимированный свет индикатор выполнения .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Чистый индикатор выполнения CSS
Прогресс на чистом CSS, довольно плавный индикатор выполнения .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Загрузочная планка
Быстрая и простая панель загрузки , создающая иллюзию рабочего индикатора выполнения.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Расширяющийся загрузчик
Тонкая полоса загрузки , которая расширяется при достижении 100%.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Сфера индикатора прогресса
Индикатор выполнения, сделанный только с анимацией HTML и CSS.