development background
In today's fast-paced digital world, user experience is one of the key aspects of website development. An effective way to improve user experience is to include progress bars in your website or application.
Consider that you are building online file upload functionality for a cloud storage application. When users upload files, they often want to know the progress of the upload, either to estimate the remaining time or to ensure that the upload process completed successfully.
By integrating a progress bar into your file upload functionality, you can provide real-time feedback to users about the progress of their file upload. This reduces uncertainty and provides a sense of control over the upload process, thereby enhancing the user experience.
In this blog post, we'll explore the power of progress bars and how to easily create them using Tailwind CSS, a popular and practical CSS framework. let's start!
Why are progress bars important?
Progress bars are an invaluable tool in providing visual feedback and managing user expectations. They convey a sense of completion, reduce anxiety, and increase user engagement. Whether it’s a file upload, form submission, or an action that takes time, a well-designed progress bar keeps users informed and engaged, resulting in a more satisfying user experience.
Create Tailwind CSS Getting Started Environment
If you already know how to install TailwindCSS, you can ignore this section.
The original text did not mention the installation method. I also tried the suggestions on the official website, but I didn’t achieve the desired effect.
1. First create a project folder and initialize the project
mkdir demo
cd demo
npm init -y2. Next, install the relevant dependencies in the project folder
npm install tailwindcss postcss autoprefixer postcss-cli3. Next, create the following folders and files in the project folder
mkdir dist
cd dist
mkdir css
cd css
touch styles.css
cd ../
touch index.html4. Create a new Tailwind CSS configuration file in this folder:
npx tailwindcss initThis will create a file called "tailwind.config.js" in the project root directory, which contains some default configuration, we need to modify the contents of the content, as follows:
module.exports = {
content: ['./dist/**/*.html'],
theme: {
extend: {},
},
plugins: [],
}5. Next, we create a new tailwind.css file in the root directory of the project. You can name the file whatever you like.
touch tailwind.cssThen in the blank file, add the following code:
@tailwind base;
@tailwind components;
@tailwind utilities;6. Finally, go back to the index.html file, write the following code, and pay attention to the reference of CSS.
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mini Project</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body class="bg-red-500 flex items-center justify-center min-h-screen">
<h1 class="text-3xl text-white ">欢迎来到前端达人</h1>
</body>
</html>7. Finally, configure the package.json file, mainly for the modification of this part
"scripts": {
"build": "postcss tailwind.css -o dist/css/styles.css",
"watch": "postcss tailwind.css -o dist/css/styles.css --watch"
}8. Finally, run npm run build and open index.html. If everything is normal, you will see the following effect.
1. Basic progress bar with rounded corners
Here's a basic progress bar with rounded corners for easy integration.
<div class="mb-5 h-2 rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-orange-500" style="width: 50%"></div>
</div>
The code snippet given above will generate a progress bar with a gray background and an orange fill, indicating a progress of 50%.
2. Thin progress bar with sharp edges
If you prefer a narrower progress bar with sharp edges, you can modify the class accordingly.
<div class="mb-5 h-1 bg-gray-200">
<div class="h-1 bg-purple-500" style="width: 75%"></div>
</div>
The above code snippet will create a narrower progress bar with a gray background and a purple fill, indicating 75% progress.
3. Progress bar with label
Adding a label to the progress bar provides additional context. We can do this by including a text element inside the progress bar.
<div class="relative mb-5 h-2 rounded-full bg-gray-200">
<div class="h-2 rounded-full bg-red-500" style="width: 25%"></div>
<span class="absolute inset-0 flex items-center justify-center text-sm font-medium text-gray-900">25%</span>
</div>
In this code snippet, a percentage label is placed in the center of the progress bar, providing a clear visual representation of the progress.
4. Animation progress bar
If you want to animate the progress bar with stripes, we can do that with some additional CSS classes.
<div class="mb-5 h-2 overflow-hidden rounded-full bg-gray-200">
<div class="h-2 animate-pulse rounded-full bg-gray-800" style="width: 50%">
<div class="h-full w-full translate-x-full transform bg-white"></div>
</div>
</div>
This snippet of code creates a progress bar with an animated stripe effect. The progress bar fills 50% of the container, while the stripe animation moves from left to right, giving a visual indication of the progress.
5. Linear progress bar for bottom text
This progress bar allows to add external bottom text (progress percentage) while showing the progress.
<div class="relative mb-5 pt-1">
<div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
<div style="width: 80%" class="bg-green-500"></div>
</div>
<div class="mb-2 flex items-center justify-between text-xs">
<div class="text-gray-600">Progress</div>
<div class="text-gray-600">100%</div>
</div>
</div>
In this code snippet, a percentage label and text are placed below the progress bar, providing a clear visual representation of the progress.
6. Vertical progress bar
The progress bar is vertical. Use the flex-col class to align elements column-wise.
<div class="flex">
<div class="mb-5 ml-5 flex flex-col items-center">
<div class="h-24 w-5 overflow-hidden rounded-md bg-gray-300">
<div class="h-full bg-yellow-800" style="height: 50%"></div>
</div>
<span class="mt-2 text-xs text-gray-600">50%</span>
</div>
<div class="mb-5 ml-5 flex flex-col items-center">
<div class="h-24 w-10 overflow-hidden rounded-full bg-gray-300">
<div class="h-full bg-yellow-500" style="height: 75%"></div>
</div>
<span class="mt-2 text-xs text-gray-600">75%</span>
</div>
<div class="mb-5 ml-5 flex flex-col items-center">
<div class="h-24 w-10 overflow-hidden rounded-full bg-gray-200">
<div class="h-full bg-gradient-to-t from-gray-200 via-blue-400 to-blue-600" style="height: 60%"></div>
</div>
<span class="mt-2 text-xs text-gray-600">60%</span>
</div>
</div>
The height of the progress bar is set using the h-24 class, and the amount of padding is indicated by adjusting the height of the inner div, which is adjusted using the h-full class.
7. Thermometer progress bar
This progress bar is rounded.
<div class="relative mb-5">
<div class="rounded-full border border-red-500 p-1">
<div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
<span class="p-1 text-white">85%</span>
</div>
</div>
</div>
This is a completely different kind of progress bar, and we made it by applying padding in the code snippet above.
The outer div with rounded-full and border classes creates a rounded container. Fills the progress according to the specified percentage, and achieves a circular shape by setting the percentage values of height and width.
We can also add a circle at 50% or any other position. It will represent some end point or goal point for easy progress in the mission.
<div class="relative my-20 mx-5">
<div class="rounded-full border border-red-500 p-1">
<div class="flex h-6 items-center justify-center rounded-full bg-red-300 text-xs leading-none" style="width: 85%; height: 85%;">
<span class="p-1 text-white">85%</span>
</div>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="h-8 w-8 rounded-full bg-red-500"></div>
</div>
</div>
The inner div represents the progress, positioned in the outer container using the absolute class.
8. Colorful progress bar
The progress bar is divided into differently colored segments, each segment representing a specific percentage of progress.
<div class="relative my-20 mx-5 pt-1">
<div class="mb-4 flex h-2 overflow-hidden rounded bg-gray-100 text-xs">
<div style="width: 10%" class="bg-green-500 transition-all duration-500 ease-out"></div>
<div style="width: 25%" class="bg-yellow-500 transition-all duration-500 ease-out"></div>
<div style="width: 20%" class="bg-red-500 transition-all duration-500 ease-out"></div>
</div>
<div class="mb-2 flex items-center justify-between text-xs">
<div class="text-gray-600">Progress</div>
<div class="text-gray-600">100%</div>
</div>
</div>
In this snippet we have three different colors, each with a different percentage. These colors represent progress using different colors to indicate overall progress and subtask progress.
Each section is defined by a separate div tag, using the bg-green-500 class to set a percentage value for the width. Different sections can have different colors, and we can adjust the number and width of sections according to our needs.
9. Gradient progress bar
This progress bar utilizes a gradient effect to create a smooth transition of colors.
<div class="mb-5 h-4 overflow-hidden rounded-full bg-gray-200">
<div class="h-4 animate-pulse rounded-full bg-gradient-to-r from-green-500 to-blue-500" style="width: 75%"></div>
</div>
The bg-gradient-to-r class applies a left-to-right gradient starting at the color specified by from-green-500 and ending at the color specified by to-blue-500 . The w-1/2 class sets the width of each gradient section to 50%, creating two equal segments.
We can also use it to modify any style to make it more interactive to show the progress of the task, like this
<div class="relative mb-5 h-5 rounded-full bg-gray-200">
<div class="h-full animate-pulse rounded-full bg-blue-500" style="width: 75%">
<span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white">75%</span>
</div>
</div>
10. Colorful and multi-segment progress bar
The progress bar is divided into differently colored segments, each segment representing a specific percentage of progress.
<div class="relative">
<div class="mb-4 flex h-5 overflow-hidden rounded bg-gray-100 text-xs">
<div class="flex flex-col justify-center bg-red-500 text-white" style="width: 25%;">
<span class="text-center">25%</span>
</div>
<div class="flex flex-col justify-center bg-red-400 text-white" style="width: 25%;">
<span class="text-center">25%</span>
</div>
<div class="flex flex-col justify-center bg-red-300 text-white" style="width: 25%;">
<span class="text-center">25%</span>
</div>
<div class="flex flex-col justify-center bg-red-200 text-white" style="width: 25%;">
<span class="text-center">25%</span>
</div>
</div>
<div class="mb-2 flex items-center justify-between text-xs">
<div class="text-gray-600">Progress</div>
<div class="text-gray-600">100%</div>
</div>
</div>
In this snippet, we design progress steps with different colors and progress percentages. Also, the text on the bottom bar indicates the overall progress, while the inner text indicates the progress of the steps.
Each section is defined by a separate div tag, using the bg-red-500 class to set a percentage value for the width. Different sections can have different colors, and we can adjust the number and width of sections as needed.
These are just a few examples of the progress bars you can create with Tailwind CSS. By combining various utility classes and custom styles, you can create progress bars that meet your design requirements.
Don't forget to add the necessary Tailwind CSS classes and inline styles to adjust the width, color and animation of the progress bar to your liking. With Tailwind CSS' flexible utility classes, the possibilities are endless!
Finish
Throughout this article, we explore how to create beautiful and customizable progress bars using Tailwind CSS. With its rich collection of utility classes, Tailwind CSS gives you an easy and efficient way to style and customize progress bars to suit your design needs.
We started by creating basic rounded corners and a slim progress bar, then added labels to the progress bar to provide additional contextual information to the user.
For added visual impact, we tried an animated progress bar with a stripe effect. By combining classes like animate-pulse and animate-stripes , we create dynamic and attractive progress bars.
Also, we tried different styles, including gradient progress bar, vertical progress bar, circular progress bar and colorful progress bar. These changes allow us to create visually appealing progress indicators that can be customized to specific project needs.
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of the article is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.