A progress bar, that’s what we are going to build.
Why are progress bars important
When you are building a website, you will probably have to show a progress bar to your users for many different reasons.
For example, you might want to show a progress bar to your users when they are uploading a file, or when they are downloading something.
Some Use cases:
- Show a progress bar to your users when they are uploading a file.
- Show a progress bar to your users when they are downloading something.
- Show a progress bar to your users when they are processing a form.
- When reading a blog post, show a progress bar to show long is left to read.
Let’s create the structure
The important parts:
-
x-data="{ progress: 0, interval: null }"is the data that will be used to store the progress value. -
x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }"is the code that will be executed every 100ms to update the progress value. -
x-text="progress + '%'"is the code that will be executed to display the progress value. -
x-bind:style="'width: ' + progress + '%;'"is the code that will be executed to set the width of the progress bar.
x-data="{ progress: 0, interval: null }"
x-init="() => { interval = setInterval(() => { progress < 100 ? progress += 5 : clearInterval(interval); }, 100); }">
x-text="progress + '%'">
