Creating a multi-step progress bar in Yii2 that showcases completed steps using jQuery

Is there a way to automatically transition from one state to another once the order status changes in Yii2?

    var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function() {
  $('.progress .circle:nth-of-type(' + i + ')').addClass('active');

  $('.progress .circle:nth-of-type(' + (i-1) + ')').removeClass('active').addClass('done');

  $('.progress .circle:nth-of-type(' + (i-1) + ') .label').html('✓');

  $('.progress .bar:nth-of-type(' + (i-1) + ')').addClass('active');

  $('.progress .bar:nth-of-type(' + (i-2) + ')').removeClass('active').addClass('done');

  i++;

  if (i==0) {
    $('.progress .bar').removeClass().addClass('bar');
    $('.progress div.circle').removeClass().addClass('circle');
    i = 1;
  }
}, 1000);

Check out my JSfiddle for more details: http://jsfiddle.net/9cs776m0/1/

javascriptjqueryhtmlcssyii2

Answer №1

Give this a shot:

var circles = $('.progress .circle');
var currentCircle = circles.first();
var previousCircle = $();

(function()
{
    currentCircle.addClass('active');
    previousCircle.removeClass('active').addClass('done');

    var bar = currentCircle.prev();
    bar.addClass('done');

    previousCircle = currentCircle;
    currentCircle = currentCircle.nextAll('.circle:first');

    if (previousCircle.length)
    {
        setTimeout(arguments.callee, 1000);
    }
})();

No need for an extra half class on the bar!

Check it out here!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with setting image source using Jquery?

The functionality of my razor in setting an image source is functioning properly. However, when I use my jQuery method to retrieve data, it returns a garbled URL: ���� Refreshing the page does not affect the HTML code, as it continues to work as e ...

jqueryhtmlajaxasp.net-mvcimage

Adding middleware to the res.render() function can be extremely helpful when dealing with a large number

Recently, I put together a webpage for local use and it involves many routes. Specifically, I have 31 .ejs files and 3 .html files all neatly stored in the "views" folder. //app.js - using node and express app.get('/page1', function(req, res ...

javascriptnode.jsexpress

Unable to modify the hover color on the image or icon

After creating a circle icon with an image in the center, I wanted to make the image change colors on hover. The main focus of the icon is the circle itself. In my attempt to achieve this effect, I included the following code for the circle icon: .circle- ...

javascriptcss

Angular appears to be having trouble with localStorage functionality

Having an issue with my service that interacts with a local NOTES object array using localStorage. Whenever the page refreshes, the previously entered data is lost and only the initial data in the const NOTES array remains. Can't seem to figure out wh ...

javascriptangularlocal-storageangular2-services

Ways to center vertically aligned buttons within cards in a React application with Material-UI

I've encountered an issue with my ReactJS project using material-ui. I created 3 cards, each with a paragraph of varying lengths. This caused the buttons to be misaligned vertically in each card, as the position differs due to paragraph size differenc ...

javascripthtmlcssreactjsmaterial-ui

There seems to be a problem with the text-to-speech API: It looks like there's a ReferenceError stating that

Currently, I am developing a program using the Quasar framework which is based on Vue and can be compiled for mobile using Cordova. However, I am encountering some issues when trying to run it on mobile. Below is the function causing problems: activat ...

javascriptcordovavue.jstext-to-speechquasar-framework

What is the best way to enable a child category on a treeview within a Vue component?

I am working with two vue components. The first component (parent component) looks like this: <template> ... <ul class="filter-category" v-for="list in categories"> <list-category :data="list" :category-id="category ...

javascriptvue.jstreeviewvuejs2vue-component

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

javascriptphphtmljqueryajax

Utilizing fibrous in node.js to efficiently fetch data from the request library

I am struggling to efficiently utilize the fibrous library in conjunction with request for obtaining the body of an HTTP request synchronously. However, I have encountered difficulties in managing the flow. In order to address this issue, I created a simp ...

javascriptnode.jsasynchronouscoffeescript

A convenient way to implement a polyfill for the Object.create method in JavaScript using

A new way to implement the polyfill for javascript Object.create() has left me puzzled. You can find the code here. if (typeof Object.create != 'function') { // Implementation steps based on ECMA-262, Edition 5, 15.2.3.5 // Reference: ...

javascriptclosurespolyfillsiife

Discovering image file extensions in JavaScript using regular expressions

Can anyone provide me with a javascript regular expression to validate image file extensions? ...

javascriptregeximage

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Which child node of the html tag represents the "text"?

In my quest for answers, I have searched extensively but to no avail: As we all know, when a web page is loaded in a browser, it generates a tree-like structure called the Document Object Model (DOM). This allows Javascript to manipulate the elements of t ...

javascripthtmldomdom-node

What is the process for generating SDF-Icons (Mapbox's specialized icons) from PNG files?

I am currently working on changing the icon color of an icon image in Mapbox. According to Mapbox documentation, the only way to do this is by using sdf-icons (https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/#paint-symbol-icon-color). After hours o ...

javascriptmapboxmapbox-gl-jsglyphicons

Tap on the HTML5 video to exit the fullscreen mode

Objective I have successfully implemented a fullscreen video setup that triggers when a link is tapped on a mobile device. To maintain a clean aesthetic, I have hidden the HTML5 video controls using CSS. The desired functionality includes closing the full ...

javascripthtmljquerygoogle-chromevideo

Receive information on browser activity

Is there a way to trigger an event when the following actions occur: Pressing the reload icon in the browser Pressing the Back or Forward icon in the browser Selecting the Reload menu item from the browser context menu Selecting the Reload option from t ...

javascriptjquery

Real-time searching on Laravel using AJAX technology

I'm having trouble with implementing a live search feature in my Laravel 5.4 project. The console is showing an error message: GET http://localhost/bodegasilusion/public/search 500 (Internal Server Error) jquery.js:9392 Despite trying different solut ...

jqueryajaxlaravel-5.4livesearch

Struggling to fix errors within a nested div element?

I'm currently utilizing AngularJS to perform basic form validation. Below is the current code snippet: <form name="myForm" id="form_id" method="post" novalidate> <div class="form-group"> <label for="myField_input" class="c ...

javascripthtmlangularjstwitter-bootstrap

What is preventing jQuery from returning a string or text value?

index.html <button id="fetchGroupers">Fetch Groupers</button> <script type="text/javascript"> $(document).ready(function () { $("#fetchGroupers").click(function () { $.ajax({ type ...

asp.netjqueryajaxpost

Trouble with React Native ListView Item Visibility

I'm currently working on integrating the React Native <ListView /> component with the <List /> and <ListItem /> components from React Native Elements. However, I seem to be facing an issue where the <ListItem /> component is no ...

javascriptlistviewreactjsreact-native