Как сделать прогресс бар на 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, которое мы настроили в нашем первом примере, вы получите аналогичные результаты.

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

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее

Как использовать фильтры CSS

Фильтры CSS - это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее

Прижать футер с помощью Flexbox

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

CSS animation

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

CSS transition

CSS transition - это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее

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

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

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

  1. Naju:
    09.12.2020 в 12:39

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

    Ответить

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

*

code

Поиск
Категории
Теги
ACF Ajax amoCRM Bootstrap CentOS Git Instagram jQuery MacOS MySQL SEO Telegram YouTube Битрикс24 Яндекс
Подписаться
Приглашаем организовать незабвенный интимный досуг с благодаря сайту individualkikrasnoyarska.net. Тут собраны частные профили возбуждающие шлюх, которым по душе удовлетворять парней по высшему типу. Топ кара