Как создать многоступенчатый индикатор выполнения с помощью Bootstrap?

Опубликовано: 6 Января, 2022

В этой статье мы создадим многоступенчатый индикатор выполнения с помощью Bootstrap. В дополнение к Bootstrap мы будем использовать jQuery для манипуляций с DOM.

Индикаторы выполнения используются для визуализации количества выполненной работы. Сила индикатора выполнения указывает на прогресс работы. Обычно он используется в онлайн-веб-приложениях, таких как YouTube, GitHub и т. Д., Чтобы показать, как страница загружена на данный момент. Вы также можете найти индикатор выполнения при загрузке или загрузке контента в веб-приложение.

Многошаговый индикатор выполнения используется для отображения хода работы в пошаговом формате .

Например:

 Шаг 1 -> Шаг 2 -> Шаг 3 -> Окончательный

У каждого шага есть индикатор выполнения, который показывает прогресс до следующего шага.

Пример: Чтобы создать многоступенчатый индикатор выполнения, давайте создадим 3 файла index.html , styles.css , script.js .

index.html:

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < link href =
 ' https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ' >
 
    < script src =
 ' https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js ' >
    </ script >
 
    < script src =
 ' https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js ' >
    </ script >
 
    < link rel = "stylesheet" href = "styles.css" >
 </ head >
 
< body >
    < div class = "container" >
        < div class = "row justify-content-center" >
            < div class="col-11 col-sm-9 col-md-7
                col-lg-6 col-xl-5 text-center p-0 mt-3 mb-2">
                < div class = "px-0 pt-4 pb-0 mt-3 mb-3" >
                    < form id = "form" >
                        < ul id = "progressbar" >
                            < li class = "active" id = "step1" >
                                < strong >Step 1</ strong >
                            </ li >
                            < li id = "step2" >< strong >Step 2</ strong ></ li >
                            < li id = "step3" >< strong >Step 3</ strong ></ li >
                            < li id = "step4" >< strong >Step 4</ strong ></ li >
                        </ ul >
                        < div class = "progress" >
                            < div class = "progress-bar" ></ div >
                        </ div > < br >
                        < fieldset >
                            < h2 >Welcome To GFG Step 1</ h2 >
                            < input type = "button" name = "next-step"
                                class = "next-step" value = "Next Step" />
                        </ fieldset >
                        < fieldset >
                            < h2 >Welcome To GFG Step 2</ h2 >
                            < input type = "button" name = "next-step"
                                class = "next-step" value = "Next Step" />
                            < input type = "button" name = "previous-step"
                                class = "previous-step"
                                value = "Previous Step" />
                        </ fieldset >
                        < fieldset >
                            < h2 >Welcome To GFG Step 3</ h2 >
                            < input type = "button" name = "next-step"
                                class = "next-step" value = "Final Step" />
                            < input type = "button" name = "previous-step"
                                class = "previous-step"
                                value = "Previous Step" />
                        </ fieldset >
                        < fieldset >
                            < div class = "finish" >
                                < h2 class = "text text-center" >
                                    < strong >FINISHED</ strong >
                                </ h2 >
                            </ div >
                            < input type = "button" name = "previous-step"
                                class = "previous-step"
                                value = "Previous Step" />
                        </ fieldset >
                    </ form >
                </ div >
            </ div >
        </ div >
    </ div >
 </ body >
 < script src = "script.js" ></ script >
 
</ html > 

styles.css:

CSS

 * {
    margin : 0 ;
    padding : 0
 }
 
html {
    height : 100%
 }
 
h 2 {
    color : #2F8D46 ;
 }
 #form {
    text-align : center ;
    position : relative ;
    margin-top : 20px
 }
 
#form fieldset {
    background : white ;
    border : 0 none ;
    border-radius: 0.5 rem;
    box-sizing: border-box;
    width : 100% ;
    margin : 0 ;
    padding-bottom : 20px ;
    position : relative
 }
 
.finish {
    text-align : center
 }
 
#form fieldset:not(:first-of-type) {
    display : none
 }
 
#form .previous-step, .next-step {
    width : 100px ;
    font-weight : bold ;
    color : white ;
    border : 0 none ;
    border-radius: 0px ;
    cursor : pointer ;
    padding : 10px 5px ;
    margin : 10px 5px 10px 0px ;
    float : right
 }
 
.form, .previous-step {
    background : #616161 ;
 }
 
.form, .next-step {
    background : #2F8D46 ;
 }
 
#form .previous-step:hover,
 #form .previous-step:focus {
    background-color : #000000
 }
 
#form .next-step:hover,
 #form .next-step:focus {
    background-color : #2F8D46
 }
 
.text {
    color : #2F8D46 ;
    font-weight : normal
 }
 
#progressbar {
    margin-bottom : 30px ;
    overflow : hidden ;
    color : lightgrey
 }
 
#progressbar .active {
    color : #2F8D46
 }
 
#progressbar li {
    list-style-type : none ;
    font-size : 15px ;
    width : 25% ;
    float : left ;
    position : relative ;
    font-weight : 400
 }
 
#progressbar #step 1: before {
    content : "1"
 }
 
#progressbar #step 2: before {
    content : "2"
 }
 
#progressbar #step 3: before {
    content : "3"
 }
 
#progressbar #step 4: before {
    content : "4"
 }
 
#progressbar li:before {
    width : 50px ;
    height : 50px ;
    line-height : 45px ;
    display : block ;
    font-size : 20px ;
    color : #ffffff ;
    background : lightgray;
    border-radius: 50% ;
    margin : 0 auto 10px auto ;
    padding : 2px
 }
 
#progressbar li:after {
    content : '' ;
    width : 100% ;
    height : 2px ;
    background : lightgray;
    position : absolute ;
    left : 0 ;
    top : 25px ;
    z-index : -1
 }
 
#progressbar li.active:before,
 #progressbar li.active:after {
    background : #2F8D46
 }
 
.progress {
    height : 20px
 }
 
.progress-bar {
    background-color : #2F8D46
 }

script.js

Javascript

 $(document).ready( function () {
    var currentGfgStep, nextGfgStep, previousGfgStep;
    var opacity;
    var current = 1;
    var steps = $( "fieldset" ).length;
 
    setProgressBar(current);
 
    $( ".next-step" ).click( function () {
 
        currentGfgStep = $( this ).parent();
        nextGfgStep = $( this ).parent().next();
 
        $( "#progressbar li" ).eq($( "fieldset" )
            .index(nextGfgStep)).addClass( "active" );
 
        nextGfgStep.show();
        currentGfgStep.animate({ opacity: 0 }, {
            step: function (now) {
                opacity = 1 - now;
 
                currentGfgStep.css({
                    'display' : 'none' ,
                    'position' : 'relative'
                });
                nextGfgStep.css({ 'opacity' : opacity });
            },
            duration: 500
        });
        setProgressBar(++current);
    });
 
    $( ".previous-step" ).click( function () {
 
        currentGfgStep = $( this ).parent();
        previousGfgStep = $( this ).parent().prev();
 
        $( "#progressbar li" ).eq($( "fieldset" )
            .index(currentGfgStep)).removeClass( "active" );
 
        previousGfgStep.show();
 
        currentGfgStep.animate({ opacity: 0 }, {
            step: function (now) {
                opacity = 1 - now;
 
                currentGfgStep.css({
                    'display' : 'none' ,
                    'position' : 'relative'
                });
                previousGfgStep.css({ 'opacity' : opacity });
            },
            duration: 500
        });
        setProgressBar(--current);
    });
 
    function setProgressBar(currentStep) {
        var percent = parseFloat(100 / steps) * current;
        percent = percent.toFixed();
        $( ".progress-bar" )
            .css( "width" , percent + "%" )
    }
 
    $( ".submit" ).click( function () {
        return false ;
    })
 });

Выход:

JQuery Picked HTML CSS-Misc HTML-Misc CSS Bootstrap

Как создать многоступенчатый индикатор выполнения с помощью Bootstrap?

HTML

CSS

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ