logo
v2.5.13

Process Indicator

Show that a process is in progress. A process can have two possible outcomes. It could either pass or fail. The process indicator can be used within the page but looks cooler when used in a Modal component. There are three parts to using the process indicator component.

processing
Deleting pending payment
process passed
Pending payment was deleted successfully
process failed
Pending payment could not be deleted

Now that we have seen all three parts that make up this component, let's build a flow that makes use of all three parts. This is heavily dependent on Javascript but nothing scary. Let's simulate deleting of a pending payment.

   

Let's break down what is happening by first looking at the buttons that triggered the modal.

        
            <x-bladewind::button
                onclick="deletePayment('pass')"
                size="small">
                Delete Payment and Pass
            </x-bladewind::button>

            <x-bladewind::button
                onclick="deletePayment('fail')"
                size="small">
                Delete Payment and Fail
            </x-bladewind::button>
        
    

Next, let's look at the modal element and the two possible process outcomes

        
            <x-bladewind::modal
                name="delete-paymentz"
                show_action_buttons="false">

                // this shows that process is in progress
                <x-bladewind::processing
                    name="processing-delete"
                    message="Deleting pending payment"
                    hide="false" />

                // this is shown when process completes with a pass
                <x-bladewind::process-complete
                    name="delete-payment-yes"
                    process_completed_as="passed"
                    button_label="Done"
                    button_action="alert('i passed... closing modal now'); hideModal('delete-paymentz')"
                    message="Pending payment was deleted successfully" />

                // this is shown when process completes with a failure
                <x-bladewind::process-complete
                    name="delete-payment-no"
                    process_completed_as="failed"
                    button_label="Done"
                    button_action="alert('i failed... closing modal now'); hideModal('delete-paymentz')"
                    message="Pending payment could not be deleted" />

            </x-bladewind::modal>
        
    

Now let's take a look at the Javascript function both buttons are calling.

        
            <script>
                deletePayment = (mode) => {
                    // it is preferred to hide all three elements
                    // and show only the element that needs to be shown
                    // hide the processing delete element
                    hideHideables();

                    // show the modal and the processing delete element
                    // showModal() and unhide() are helper functions
                    // available in BladewindUI
                    showModal('delete-paymentz');
                    unhide('::processing-delete');

                    // this example only shows a specific outcome
                    // after 3 seconds based on which button was clicked.
                    // In your apps you will typically display an outcome
                    // based on some API return value or something similar
                    setTimeout(function() {

                        hideHideables();

                        // determine which process outcome to show
                        (mode == 'pass') ?
                            unhide('.delete-payment-yes') :
                            unhide('.delete-payment-no');
                    }, 3000);
                }

                hideHideables = () => {
                    // hide() is a helper function available in BladewindUI
                    hide('::processing-delete');
                    hide('.delete-payment-yes');
                    hide('.delete-payment-no');
                }
            </script>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Process Indicator component.

IMPORTANT: Projects running Laravel 8 please read this

Processing Component Attributes

Option Default Available Values
name processing Unique name for the processing component. Usually useful to prevent erratic behaviour if there are multiple Process Indicators on the same page.
hide true The processing component is hidden by default. true false
message blank Message to display below the spinning icon.

Process Complete Component Attributes

Option Default Available Values
name process-complete Unique name for the process complete component. Usually useful to prevent erratic behaviour if there are multiple Process Complete components on the same page.
process_completed_as passed There are two possible values. This attribute determines which icon to display based on the outcome. A pass will display a green thumbs up icon. A fail will display a red thumbs down icon. passed failed
message blank Message to display below the thumbs up or down icon.
button_label blank Label to display on the call to action button when process is complete.
button_action blank Javascript function to call when the call to action button is clicked.
hide true The process complete component is hidden by default. true false

Process Indicator with all attributes defined

        
            <x-bladewind::processing
                name="processing-delete"
                message="Deleting pending payment"
                hide="false" />

            // this is shown when process completes with a pass
            <x-bladewind::process-complete
                name="delete-payment-yes"
                process_completed_as="passed"
                hide="false"
                button_label="Done"
                button_action="hideModal('delete-paymentz')"
                message="Pending payment was deleted successfully" />

            // this is shown when process completes with a failure
            <x-bladewind::process-complete
                name="delete-payment-no"
                process_completed_as="failed"
                hide="false"
                button_label="Done"
                button_action="hideModal('delete-paymentz')"
                message="Pending payment could not be deleted" />
        
    
The source file for this component is available in resources > views > components > bladewind > processing.blade.php and resources > views > components > bladewind > process-complete.blade.php