मैं नीचे के रूप में प्रगति संकेतक प्रदर्शित करने के लिए एक परिदृश्य पर काम कर रहा हूँ:

प्रगति संकेतक

मैं प्रदान किए गए इनपुट के आधार पर गतिशील रूप से प्रगति संकेतक प्रदर्शित करने का प्रयास कर रहा हूं (जो कुल चरण हैं जो इस मामले में 5 हैं, चरण पूर्ण हैं जो इस मामले में 3 हैं और चरण नाम)। मुझे जावास्क्रिप्ट में ज्यादा अनुभव नहीं है। मैंने नीचे कोशिश की लेकिन यह स्थिर है और लुक और फील इमेज के समान नहीं है। इस पर किसी भी मदद की सराहना की जाती है। धन्यवाद।

/* Progress Tracker v2 */
    ol.progress[data-steps="2"] li { width: 49%; }
    ol.progress[data-steps="3"] li { width: 33%; }
    ol.progress[data-steps="4"] li { width: 24%; }
    ol.progress[data-steps="5"] li { width: 19%; }
    ol.progress[data-steps="6"] li { width: 16%; }
    ol.progress[data-steps="7"] li { width: 14%; }
    ol.progress[data-steps="8"] li { width: 12%; }
    ol.progress[data-steps="9"] li { width: 11%; }
    
    .progress {
        width: 100%;
        list-style: none;
        list-style-image: none;
        margin: 20px 0 20px 0;
        padding: 0;
    }
    
    .progress li {
        float: left;
        text-align: center;
        position: relative;
    }
    
    .progress .name {
        display: block;
        vertical-align: bottom;
        text-align: center;
        margin-bottom: 1em;
        color: black;
        opacity: 0.3;
    }
    
    .progress .step {
        color: black;
        border: 3px solid silver;
        background-color: silver;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }
    
    .progress .step span {
        opacity: 0.3;
    }
    
    .progress .active .name,
    .progress .active .step span {
        opacity: 1;
    }
    
    .progress .step:before {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.6em;
        left: 0;
        z-index: -1;
    }
    
    .progress .step:after {
        content: "";
        display: block;
        background-color: silver;
        height: 0.4em;
        width: 50%;
        position: absolute;
        bottom: 0.6em;
        right: 0;
        z-index: -1;
    }
    
    .progress li:first-of-type .step:before {
        display: none;
    }
    
    .progress li:last-of-type .step:after {
        display: none;
    }
    
    .progress .done .step,
    .progress .done .step:before,
    .progress .done .step:after,
    .progress .active .step,
    .progress .active .step:before {
        background-color: blue;
    }
    
    .progress .done .step,
    .progress .active .step {
        border: 3px solid blue;
    }
<!-- Progress Tracker v2 -->
    <ol class="progress" data-steps="4">
        <li class="done">
            <span class="name">Foo</span>
            <span class="step"><span>1</span></span>
        </li>
        <li class="done">
            <span class="name">Bar</span>
            <span class="step"><span>2</span></span>
        </li>
        <li class="active">
            <span class="name">Baz</span>
            <span class="step"><span>3</span></span>
        </li>
        <li>
            <span class="name">Quux</span>
            <span class="step"><span>4</span></span>
        </li>
    </ol>
0
Suhasini 10 अगस्त 2020, 16:10

1 उत्तर

सबसे बढ़िया उत्तर

आप एक जावास्क्रिप्ट फ़ंक्शन लिख सकते हैं जो किसी दिए गए चरण में प्रगति पट्टी सेट करता है। नीचे दिया गया उदाहरण बस यही करता है। चरणों को 0 से अनुक्रमित किया गया है। मैंने JS में प्रगति पट्टी खोजने के लिए एक id विशेषता भी जोड़ी है।

CSS एक उदाहरण के रूप में एक सुखद एनीमेशन प्रदान करता है। इसे और तेज़ बनाने के लिए कस्टम transition-timing-function से लाभ होगा। एक और सुधार नोड रंग को एनिमेटेड बनाना होगा। आप transition-delay के साथ लाइन के एनिमेशन के साथ तालमेल बिठाने के लिए समय निकाल सकते हैं।

march() फ़ंक्शन केवल प्रदर्शन उद्देश्यों के लिए उदाहरण को एनिमेट करता है।

function setProgress(barId, activeStage) {
    var steps = document.getElementById(barId).children;
    // Iterating all children avoids referencing undefined objets when activeStage >= steps.length and also handles setting the progress bar back
    for (var i = 0; i < steps.length; i++) {
        if (i < activeStage) {
            steps[i].className = "done";
        } else if (i == activeStage) {
            steps[i].className = "active";
        } else {
            steps[i].className = "";
        }
        // Alternatively .classList.add("done") and .remove() others, if overwriting classlist is to be avoided
    }
}

function march() {
    setTimeout(setProgress, 3000, "test", 0);
    setTimeout(setProgress, 6000, "test", 1);
    setTimeout(setProgress, 9000, "test", 2);
    setTimeout(setProgress, 12000, "test", 3);
}
march();
setInterval(march, 15000);
/* Progress Tracker v2 */
    ol.progress[data-steps="2"] li { width: 49%; }
    ol.progress[data-steps="3"] li { width: 33%; }
    ol.progress[data-steps="4"] li { width: 24%; }
    ol.progress[data-steps="5"] li { width: 19%; }
    ol.progress[data-steps="6"] li { width: 16%; }
    ol.progress[data-steps="7"] li { width: 14%; }
    ol.progress[data-steps="8"] li { width: 12%; }
    ol.progress[data-steps="9"] li { width: 11%; }
    
    .progress {
        width: 100%;
        list-style: none;
        list-style-image: none;
        margin: 20px 0 20px 0;
        padding: 0;
    }
    
    .progress li {
        float: left;
        text-align: center;
        position: relative;
        font-family: sans-serif;
    }
    
    .progress .name,
    .progress .description {
        display: block;
        vertical-align: bottom;
        text-align: center;
        color: black;
        opacity: 0.3;
        
    }
    
    .progress .name {
        font-size: 1.5em;
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
    
    .progress .step {
        border: 3px solid #b6b6b6;
        background-color: #b6b6b6;
        border-radius: 50%;
        line-height: 1.2;
        width: 1.2em;
        height: 1.2em;
        display: inline-block;
        z-index: 0;
    }
    
    .progress .step:before {
        content: "";
        display: block;
        background-color: #b6b6b6;
        border: 3px transparent;
        height: 0.2em;
        width: 100%;
        position: absolute;
        top: 0.6em;
        left: -50%;
        z-index: -2;
    }
    
    .progress .step:after {
        content: "";
        display: block;
        background-color: #1876d5;
        border: 3px transparent;
        height: 0.35em;
        width: 0;
        position: absolute;
        top: 0.55em;
        left: 50%;
        z-index: -1;
    }
    
    .progress li:first-of-type .step:before {
        display: none;
    }
    
    .progress li:last-of-type .step:after {
        display: none;
    }
    
    .progress .active .name,
    .progress .active .description,
    .progress .active .step {
        opacity: 1;
    }
    
    .progress .active .step {
        background-color: #1996fd;
        border: 3px solid #1996fd;
    }
    
    .progress .done .step {
        background-color: #1876d5;
        border: 3px solid #1876d5;
    }
    
    .progress .done .step:after {
        width: 100%;
        transition: width 2s ease;
    }
<!-- Progress Tracker v2 -->
    <ol class="progress" id="test" data-steps="4">
        <li class="done">
            <span class="step"></span>
            <span class="name">Step 1</span>
            <span class="description">Foo</span>
        </li>
        <li class="done">
            <span class="step"></span>
            <span class="name">Step 2</span>
            <span class="description">Bar</span>
        </li>
        <li class="active">
            <span class="step"></span>
            <span class="name">Step 3</span>
            <span class="description">Baz</span>
        </li>
        <li>
            <span class="step"></span>
            <span class="name">Step 4</span>
            <span class="description">Quux</span>
        </li>
    </ol>
0
kgello 11 अगस्त 2020, 15:34