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

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

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

A windows 10 - fluent design - progress bar for tailwind ccss

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

  • It can make the building process of Windows 10 - Fluent Design - Progress Bar ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Windows 10 - Fluent Design - Progress Bar component file.

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

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

<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 make a Windows 10 - Fluent Design - Progress Bar with Tailwind CSS?

Install tailwind css of verion 1.0.4

Use the link html tag to import the stylesheet of Tailwind CSS of the version 1.0.4

<link href=https://unpkg.com/[email protected]/dist/tailwind.min.css rel="stylesheet">

All the unility class needed to make a Windows 10 - Fluent Design - Progress Bar component

  • w-full
  • overflow-hidden
  • w-1/2
  • inline-block
  • relative
  • mt-24

6 steps to make a Windows 10 - Fluent Design - Progress Bar component with Tailwind CSS

  1. Use w-full to set an element to a 100% based width.

  2. Use overflow-hidden to clip any content within an element that overflows the bounds of that element.

  3. Use w-1/2 to set an element to a fixed width(1/2).

  4. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  5. Use relative to position an element according to the normal flow of the document.

  6. Control the margin on top side of an element to 6rem using the mt-24 utilities.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to make a Windows 10 - Fluent Design - Progress Bar components, learn and follow along to implement your own components.