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

Gulp halts when watching code and reloads upon any changes made

Hey there, I'm new to GULP and could use some help... I've been trying to configure GULP for a template that uses AngularJS. When I run the gulp command, the console displays the message "**Done Waching code and reloading on changes" but nothing ...

javascriptangularjsgulp

Assigning values to props in a Vue component

I created a Vue component that is supposed to receive the "uploadedFile" prop, but it's not functioning properly. I am only getting the correct information in the $attrs: Here is my component: Vue.component('table-file', { props: [' ...

javascriptvue.jsvue-component

"Varying hues on various displays: Exploring RGB values and CSS for video color

Recently, I designed a webpage with a background-color of #f4afac. The video embedded in this page also features the same background color throughout, creating a seamless blend with no visible edges. On one screen, the colors appear perfectly consistent. ...

csshtmlvideocolors

Achieving auto-height for two elements with CSS within a single block

I am attempting to combine two blocks into one fixed-height block in order to achieve the following design: ------------------------ UL (starts with height=0), expands when elements are added until maximum height is reached scroll bar should appear aft ...

csshtml

The html2canvas script is executing before the $modalInstance is able to be closed

I am currently in the process of setting up a feedback modal within my Angular application that utilizes html2canvas to capture a "screenshot" of the user's current page. However, I have encountered an issue where the html2canvas function is being tri ...

jqueryangularjsmodal-dialoghtml2canvas

Guide on setting up a Redirect URL with React Router

I am aiming to trigger a redirect URL event using ReactJS. Is there a way to achieve this? I have already attempted the following: successRedirect(){ this.transitionTo('/'); } as well as successRedirect(){ this.router.transitionTo ...

javascripthttp-redirectreactjsreact-router

es-lint is issuing a warning about the presence of multiple modules within the node_modules directory that have names differing only in their casing

After reviewing all my import statements, I found that everything looks correct. The only unusual import I have is react-bootstrap, which I import as: import { Jumbotron, Button } from 'react-bootstrap'; I'm using the Jumbotron and Button ...

javascriptnode.jsexpressmongooseeslint

Ways to activate auto completion without using a string

Can anyone assist us with the tinymce editor? We have implemented an auto completion feature using a plugin from TinyMCE's documentation, but we are having trouble changing the triggering behavior. Currently, it only suggests options when "@" is typed ...

javascripthtmltypescripttinymcetinymce-5

Organize your blog content by utilizing post IDs as the designated id attribute

What is the best way to format blog posts and comments in HTML so that I can easily manipulate them later using jQuery/Javascript for tasks like updating, deleting, or making Ajax calls? I am considering using the IDs (primary keys in the database) of the ...

javascriptjqueryhtmlajax

Utilize Android accelerometer data to bring objects to life with animation

Utilizing an Android app, I am streaming accelerometer data to a Python script on my PC. The data is then saved to a text file. My goal is to utilize Javascript and jQuery to animate a 3D CSS cuboid (representing the device) to replicate the movements capt ...

javascriptandroidjquerypythoncss

How can JavaScript be used to create a unique signup and login process on

I am struggling with storing sign up and login details in JavaScript. In my previous project, I used PHP and a database to handle this information, so transitioning to JavaScript has been challenging. Here is an example of the sign-up HTML code: <!DOC ...

javascripthtmlauthentication

What is the best way to create an L shape using CSS?

I am currently working on achieving a unique style using CSS. https://i.sstatic.net/bJlok.png My progress so far: .file { width: 279px; height: 326px; background: linear-gradient(-135deg, transparent 66px, #A1A1A4 40px); position: relative; } ...

htmlcsscss-shapeslinear-gradients

Issues with the directory for Chrome

Currently, I am utilizing jQuery and running an HTML file on my local machine without a server. Interestingly, the code works perfectly fine on Firefox but encounters issues on Chrome: $('#result').load('test.html'); It appears that t ...

javascriptjqueryajax

Can someone guide me on how to make an array filled with dates using Javascript?

I am working on developing a Javascript code that can identify all the days leading up to the current date. Here is what I have managed so far: var titleArray = [ "title1", "title2", ]; var pictureArray = today.toString(); var thumbArray = today.toString ...

javascriptjqueryhtml

The Safari browser appears to be disregarding the positioning and size of input checkboxes, and also slightly shifting them after they are

After searching everywhere online, I still can't find a solution to this particular issue. I have a parent div that centers all elements, but for some reason the checkbox won't center in Safari. I've tried adjusting it using various methods ...

htmlcsssafari

Update the JSON data based on the specifications outlined in my project

class Transformation { constructor() { this.colHeaders = { error_description: "Description", error_status: "Status", error_code: "Error Code" }; } getColHeader() { return this.colHeaders; } } var jsonData = { error ...

javascriptjson

Obtain the key by using the JSON value

I am seeking to identify the recursive keys within a JSON Object. For instance, consider the following JSON Object: { "Division1" : { "checked": true, "level": 1, "District1-1": { "checked": true, "level ...

javascriptjqueryjson

It is not possible to include external JavaScript in a Vue.js web page

Trying to integrate a Google Translate widget onto my webpage has been a bit challenging. Initially, when I added it to a normal webpage, it worked smoothly using the following code: <div class="google_translate" id="google_translate_element"></d ...

javascriptvue.jswebpack

What is the best way to send data to PHP while moving objects between different div elements?

I have a situation where I have two parent divs containing dynamic children divs, and I want to enable POST requests to PHP when items are dragged from one side to the other (and vice versa). Here is the Javascript code I am using: function allowDrop( ...

javascriptphphtmldrag-and-dropdraggable

The peculiar effect of a CSS element's border on surrounding elements is quite unusual

I'm experiencing a strange issue that I can't quite figure out. To demonstrate the problem, I've created a fiddle. What's puzzling me is why applying a border to one of the three canvases causes my other two .headerMainDiv elements to ...

htmlcsscss-position