Как сделать прогресс бар на CSS

Как сделать прогресс бар на CSS

18 марта 2020 CSS

Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д.

Раньше было невозможно создать анимацию прогресс бара без использования JavaScript, но благодаря CSS3 теперь мы можем выполнять анимацию, добавлять градиенты и некоторые многоцветные элементы внутри div. На самом деле HTML5 также имеет специальный элемент прогресс бара, созданный именно для этой цели.

Когда вы закончите с этим уроком, вы будете знать, как сделать анимированный прогресс бар в стиле флэт дизайна, используя чистый CSS: без flash, изображений и JavaScript.

Давайте начнем…

Разметка документа

Для нашей разметки мы сделаем <div> с классом .container, который будет содержать наш прогресс бар и <div> с классом .title для названия.

Далее мы добавим <div> с классом .bar, который будет содержать теги <span> для заполненного и пустого прогресс бара. И наконец, мы добавим наши .bar-fill и .bar-unfill теги <span> внутри него.

<div class="container">
    <div class="title plain">Plain</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill"></span>
        </span>
     </div>
</div>

Простой прогресс бар CSS

Класс .container будет иметь точную ширину 30%, чтобы сделать наш прогресс бар адаптивным. Мы также поместим border-radius в класс .title вверху и внизу слева, чтобы придать ему простой дизайн в стиле flat (плоский).

.container {
    width:30%;
    margin:0 auto
}

.title {
    background:#545965;
    color:#fff;
    padding:15px;
    float:left;
    position:relative;
    -webkit-border-top-left-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-topleft:5px;
    -moz-border-radius-bottomleft:5px;
    border-top-left-radius:5px;
    border-bottom-left-radius:5px
}

Теперь давайте сначала нарисуем незаполненный участок и выделим его белым фоном ER диаграммы.

.bar-unfill {
    height:15px;
    display:block;
    background:#fff;
    width:100%;
    border-radius:8px
}

Далее мы стилизуем наш класс .bar и зададим ему ширину 100%. Затем в классе .bar-fill мы присвоим ему ширину 0% в качестве начальной ширины. Мы также добавим CSS3 transition, чтобы сделать нашу анимацию плавной. Наконец, мы добавим CSS3 animation, содержащую имя нашей анимации, продолжительность и свойство animation-iteration-count.

.bar-fill {
    height:15px;
    display:block;
    background:#45c9a5;
    width:0;
    border-radius:8px;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

Чтобы сделать это анимированным, мы будем использовать правило CSS3 @keyframe, чтобы установить ширину от 0 до 100%. Вы также можете настроить настройки ниже по своему усмотрению.

/* Chrome, Safari, Opera */
@-webkit-keyframes progressbar { 
    from {
        width:0
    }
    to {
        width:100%
    }
}
/* Стандартный синтаксис */
@keyframes progressbar {
    from {
        width:0
    }
    to {
        width:100%
    }
}

Полосатый прогресс бар CSS

Для полосатого индикатора мы переименуем наш класс .bar-fill в .bar-fill-stripes. Мы будем использовать линейный градиент и объявим его цвета через свойство background-image. Остальная часть CSS3 анимации и перехода останется прежней. Смотрите код ниже.

.bar-fill-stripes {
    height:15px;
    display:block;
    background:#e74c3c;
    width:0;
    border-radius:8px;
    background-image:linear-gradient(-45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

Круговой прогресс бар

Для этой части нашего руководства мы собираемся создать трекер для нашего индикатора выполнения. Поэтому мы немного скорректируем нашу разметку, а также наш CSS. Проверьте разметку ниже.

<div class="container">
    <div class="title">Tracker</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill-tracker"></span>
            <span class="track-wrap">
                <span class="track"></span>
            </span>
        </span>
    </div>
</div>

Как вы видите, мы добавили <span> c классами .track-wrap и .track внутри .bar-unfil. Они будут содержать наш круговой прогресс бар, а затем анимировали его с помощью другого правила @keyframe. Давайте напишем стили для наших классов .track-wrap и .track.

.track-wrap {
    position:relative;
    top:-18px;
    -webkit-animation:progressbar2 7s infinite;
    animation:progressbar2 7s infinite
}

.track {
    height:20px;
    display:block;
    background:#e74c3c;
    width:20px;
    border-radius:10px;
    position:relative;
    left:-12px
}

/* Chrome, Safari, Opera */

@-webkit-keyframes progressbar2 {
    from {
        left:0
    }
    to {
        left:100%
    }
}

/* Standard syntax */

@keyframes progressbar2 {
    from {
        left:0
    }
    to {
        left:100%
    }
}

Как вы можете видеть выше, мы установили положение <span> c классом .track-wrap относительно верхнего <span> -18px, а затем установили свойство animation. Затем установили стили класса .track, который является фактическим трекером, и установили ему border-radius на 10px и положение слева на -12px. Еще одна вещь, которую мы добавили, — это новая анимация с использованием правила @keyframe и именем progressbar2.

HTML5 прогресс бар

В наших предыдущих демонстрациях мы использовали <div> для создания прогресс бара, но на этот раз мы рассмотрим, как использовать прогресс бар на HTML5.

Основная разметка

Элемент прогресс бара на HTML5 можно добавить тегом . Внутри этого тега мы можем установить значение прогресса в атрибутах value, min и max. Проверьте базовую разметку ниже.

<progress value="50" max="100"></progress>

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

<div class="container">
	<div class="title html5">HTML5</div>
	<div class="bar">
		<span class="bar-unfill">
			<progress value="50" max="100"></progress>
		</span>
	</div>
</div>

Здесь нет ничего особенного. Мы только изменили <span> с классом .bar-fill на тег индикатора выполнения. Теперь давайте попробуем стилизовать наш прогресс бар на HTML5.

progress, progress::-webkit-progress-bar{
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

progress::-moz-progress-bar {
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

Чтобы изменить стили прогресс бара, нам нужно добавить несколько псевдо-классов Webkit и Mozilla, которые специально созданы для Chrome и Mozilla.

progress::-webkit-progress-bar {
    /* стили для Chrome */
}

progress::-moz-progress-bar {
    /* стили для Firefox*/
}

В завершении для нашего прогресс бара добавляем следующие стили CSS:

progress::-webkit-progress-bar{
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

progress::-moz-progress-bar {
    height:15px;
    display:block;
    background-color:#8e44ad;
    width:0;
    -webkit-border-radius: 8px;
    border-radius:8px;
    color: #fff;
    -webkit-transition:width .8s ease;
    -moz-transition:width .8s ease;
    transition:width .8s ease;
    -webkit-animation:progressbar 7s infinite;
    animation:progressbar 7s infinite
}

Теперь, используя наше предыдущее правило @keyframe, которое мы настроили в нашем первом примере, вы получите аналогичные результаты.

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Как сделать в Bootstrap 5 колонок

Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее

Многоуровневое меню CSS

Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее

Блочная Flexbox верстка на примерах

Flexbox - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее

Hover эффекты CSS

Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее

Препроцессор LESS. Как установить и использовать

LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее

Всплывающее окно при закрытии страницы

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

Использование функции CSS calc()

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее

Один комментарий на «Как сделать прогресс бар на CSS»

  1. Naju:
    09.12.2020 в 12:39

    А где примеры? Прямо книжка без картинок) Не все читатели могут себе нарисовать в голове, что background-color: #8e44ad — это красивый фиолетовый фон

    Ответить

Добавить комментарий

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться
Топ кара