Published on

Create A Windows 10 - Fluent Design - Progress Bar With Tailwind CSS Like A Pro With The Help Of These 6 Tips

Tags
Widget
Windows 10 - Fluent Design - Progress Bar

As a FrontEnd technology blogger, it is essential to stay up-to-date with the latest design trends and technologies. One of the most popular design trends today is the Windows 10 - Fluent Design. It is a design language that Microsoft introduced in 2017, which focuses on creating a more immersive and intuitive user experience. One of the UI components that are part of the Fluent Design is the Progress Bar. In this article, we will show you how to create a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS like a pro with the help of these 6 tips.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that provides a set of pre-defined classes to help you build responsive and customizable user interfaces quickly. It allows you to create complex designs without writing custom CSS code. Tailwind CSS is a popular choice among developers because it is easy to learn, highly customizable, and can be used with any front-end framework.

The description of Windows 10 - Fluent Design - Progress Bar ui component

The Windows 10 - Fluent Design - Progress Bar is a UI component that provides visual feedback to the user about the progress of a task. It is a horizontal bar that fills up gradually from left to right as the task progresses. The Progress Bar in the Fluent Design has a sleek and modern look that blends well with the rest of the UI components.

Why use Tailwind CSS to create a Windows 10 - Fluent Design - Progress Bar ui component?

Tailwind CSS is an excellent choice for creating a Windows 10 - Fluent Design - Progress Bar UI component because it provides a set of pre-defined classes that make it easy to create complex designs quickly. With Tailwind CSS, you can create a Progress Bar that looks and feels like the one in the Fluent Design without writing custom CSS code. Tailwind CSS also makes it easy to customize the design of the Progress Bar to match the rest of your UI components.

The preview of Windows 10 - Fluent Design - Progress Bar ui component

To create a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS, we will use a combination of pre-defined classes and custom CSS code. The Progress Bar will have a sleek and modern look that blends well with the rest of the UI components.

Free download of the Windows 10 - Fluent Design - Progress Bar's source code

The source code of Windows 10 - Fluent Design - Progress Bar ui component

To create a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS, we will use a combination of pre-defined classes and custom CSS code. The source code for the Progress Bar is straightforward and easy to understand.

<style>
.fluentProgressBar-normal {
 	background-color: #0078d4;
  	height: 4px;
 }
  
.fluentProgressBar-waiting {
	background: rgba(0,120,212,0);
	background: -moz-linear-gradient(left, rgba(0,120,212,0) 0%, rgba(0,120,212,1) 51%, rgba(0,120,212,0) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,120,212,0)), color-stop(51%, rgba(0,120,212,1)), color-stop(100%, rgba(0,120,212,0)));
	background: -webkit-linear-gradient(left, rgba(0,120,212,0) 0%, rgba(0,120,212,1) 51%, rgba(0,120,212,0) 100%);
	background: -o-linear-gradient(left, rgba(0,120,212,0) 0%, rgba(0,120,212,1) 51%, rgba(0,120,212,0) 100%);
	background: -ms-linear-gradient(left, rgba(0,120,212,0) 0%, rgba(0,120,212,1) 51%, rgba(0,120,212,0) 100%);
	background: linear-gradient(to right, rgba(0,120,212,0) 0%, rgba(0,120,212,1) 51%, rgba(0,120,212,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0078d4', endColorstr='#0078d4', GradientType=1 );
	
  	height: 4px;
  
    -webkit-animation: progressBarAnimation 2s linear infinite;
	animation: progressBarAnimation 2s linear infinite;
}

@keyframes progressBarAnimation {
	0% {
		left: -50%;
	}
	100% {
		left: 100%;
	}
}
</style>


<div class="w-full">
  	<!-- Waiting... -->
	<div class="w-full overflow-hidden">
    	<div class="w-1/2 inline-block relative fluentProgressBar-waiting"></div>
	</div>

  	<!-- 85% -->
	<div class="w-full mt-24">
    	<div class="fluentProgressBar-normal" style="width: 85%"></div>
	</div>
</div>

How to create a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS?

Step 1: Set up the HTML structure

The first step in creating a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS is to set up the HTML structure. We will use a simple HTML structure that consists of a div element with a class of "progress-bar" and an inner div element with a class of "progress-bar-fill".

<div class="progress-bar">
  <div class="progress-bar-fill"></div>
</div>

Step 2: Style the Progress Bar with Tailwind CSS

The next step is to style the Progress Bar with Tailwind CSS. We will use a combination of pre-defined classes and custom CSS code to create a sleek and modern design that blends well with the rest of the UI components.

.progress-bar {
  height: 4px;
  background-color: #F3F3F3;
  border-radius: 2px;
}

.progress-bar-fill {
  height: 100%;
  background-color: #0078D7;
  border-radius: 2px;
  transition: width 0.3s ease-in-out;
}

Step 3: Add JavaScript to update the Progress Bar

The final step is to add JavaScript code to update the Progress Bar based on the progress of the task. We will use the setInterval function to simulate the progress of the task and update the width of the inner div element accordingly.

const progressBarFill = document.querySelector('.progress-bar-fill');
let progress = 0;

setInterval(() => {
  progress += 10;
  progressBarFill.style.width = `${progress}%`;

  if (progress >= 100) {
    clearInterval();
  }
}, 1000);

Conclusion

In conclusion, creating a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS is easy and straightforward. With the help of these 6 tips, you can create a sleek and modern Progress Bar that blends well with the rest of your UI components. Tailwind CSS provides a set of pre-defined classes that make it easy to create complex designs quickly, and it can be used with any front-end framework. So, what are you waiting for? Start creating your Windows 10 - Fluent Design - Progress Bar with Tailwind CSS today!