nuernbergerA/ProgressExample.php

## ProgressExample.php
<?php

use Livewire\Component;

class ProgressExample extends Component
{
    public function process() {
        $progress = 0;

        do {
            usleep(random_int(8000,100000));
            $progress++;

            // replace content
            $this->stream('a', <<<HTML
                <progress value="$progress" max="100" style="width: 50ch">$progress %</progress>
            HTML, true);

            // append content
            $this->stream('b', '.');

        } while ($progress < 100);
    }

    public function render()
    {
        return <<<'BLADE'
            <div>
                <button wire:click="process" wire:loading.attr="disabled">start processing</button>
                <div wire:stream="b"></div>
                <div wire:stream="a"></div>
                <div wire:stream="b"></div>
            </div>
        BLADE;
    }
}
	<?php

	use Livewire\Component;

	class ProgressExample extends Component
	{
	public function process() {
	$progress = 0;

	do {
	usleep(random_int(8000,100000));
	$progress++;

	// replace content
	$this->stream('a', <<<HTML
	<progress value="$progress" max="100" style="width: 50ch">$progress %</progress>
	HTML, true);

	// append content
	$this->stream('b', '.');

	} while ($progress < 100);
	}

	public function render()
	{
	return <<<'BLADE'
	<div>
	<button wire:click="process" wire:loading.attr="disabled">start processing</button>
	<div wire:stream="b"></div>
	<div wire:stream="a"></div>
	<div wire:stream="b"></div>
	</div>
	BLADE;
	}
	}