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

18 марта 2020 CSS

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

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

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

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

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

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

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

    Plain
    
        
            
        
     

Простой прогресс бар 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
}

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

.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. Проверьте разметку ниже.

    Tracker
    
        
            
            
                
            
        
    

Как вы видите, мы добавили 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%
    }
}

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

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

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

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

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

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

        HTML5
        
                
                        
                
        

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