【tailwindcss】Propgressbar templete

Tailwindcss

              
 <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
   <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
 </div>

Small

Default

Large

Extra Large

                              
 <div class="mb-1 text-base font-medium dark:text-white">Small</div>
 <div class="w-full bg-gray-200 rounded-full h-1.5 mb-4 dark:bg-gray-700">
   <div class="bg-blue-600 h-1.5 rounded-full dark:bg-blue-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium dark:text-white">Default</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-blue-600 h-2.5 rounded-full dark:bg-blue-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-lg font-medium dark:text-white">Large</div>
 <div class="w-full h-4 mb-4 bg-gray-200 rounded-full dark:bg-gray-700">
   <div class="h-4 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-lg font-medium dark:text-white">Extra Large</div>
 <div class="w-full h-6 bg-gray-200 rounded-full dark:bg-gray-700">
   <div class="h-6 bg-blue-600 rounded-full dark:bg-blue-500" style="width: 45%"></div>
 </div>

45%

                              
 <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700">
   <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: 45%"> 45%</div>
 </div>

Title 45%

                      
 <div class="flex justify-between mb-1">
   <span class="text-base font-medium text-blue-700 dark:text-white">Title</span>
   <span class="text-sm font-medium text-blue-700 dark:text-white">45%</span>
 </div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
   <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
 </div>

Dark

Blue

Red

Green

Yellow

Indigo

Purple

                      
 <div class="mb-1 text-base font-medium dark:text-white">Dark</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-gray-600 h-2.5 rounded-full dark:bg-gray-300" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-blue-700 dark:text-blue-500">Blue</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-red-700 dark:text-red-500">Red</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-red-600 h-2.5 rounded-full dark:bg-red-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-green-700 dark:text-green-500">Green</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-green-600 h-2.5 rounded-full dark:bg-green-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-yellow-700 dark:text-yellow-500">Yellow</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-yellow-400 h-2.5 rounded-full" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-indigo-700 dark:text-indigo-500">Indigo</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 mb-4 dark:bg-gray-700">
   <div class="bg-indigo-600 h-2.5 rounded-full dark:bg-indigo-500" style="width: 45%"></div>
 </div>
 <div class="mb-1 text-base font-medium text-purple-700 dark:text-purple-500">Purple</div>
 <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
   <div class="bg-purple-600 h-2.5 rounded-full dark:bg-purple-500" style="width: 45%"></div>
 </div>

                      
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" role="progressbar">
   <div style="width:30%" class="bg-purple-400 h-4 rounded-l-lg"></div>
 </div>

                      
 <div class="bg-gray-300 rounded-lg h-4 my-3" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:30%" class="bg-purple-400 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-3" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:40%" class="bg-red-400 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-3" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:50%" class="bg-orange-400 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-3" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:60%" class="bg-green-400 h-4 rounded-l-lg"></div>
 </div>

40%

                      
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" role="progressbar">
   <div style="width:40%" class="bg-orange-400 h-4 rounded-l-lg relative">
       <div class="absolute left-1/2 text-xs text-white font-semibold">40%</div>
   </div>
 </div>

                      
 <div class="bg-gray-200 rounded-lg h-4 my-2">
   <div class="flex">
       <div style="width:5%" class="bg-purple-400 h-4 rounded-l-lg"></div>
       <div style="width:10%" class="bg-green-400 h-4"></div>
       <div style="width:15%" class="bg-yellow-400 h-4"></div>
   </div>
 </div>

30%

                      
 <div class="bg-gray-200 rounded-lg h-4 my-2">
   <div class="flex">
       <div style="width:5%" class="bg-purple-400 h-4 rounded-l-lg"></div>
       <div style="width:10%" class="bg-green-400 h-4"></div>
       <div style="width:15%" class="bg-yellow-400 h-4"></div>
   </div>
   <div class="flex items-center py-0.5" style="width:30%">
       <div class="flex-grow border-t border-gray-400"></div>
       <div class="text-xs flex-shrink pl-auto text-center px-1 font-medium text-gray-800">30%</div>
       <div class="flex-grow border-t border-gray-400"></div>
   </div>
 </div>

Donations

Savings

Loan

                      
 <div class="bg-gray-200 rounded-lg h-4 my-2">
         <div class="flex">
             <div style="width:5%" class="bg-purple-400 h-4 rounded-l-lg"></div>
             <div style="width:10%" class="bg-green-400 h-4"></div>
             <div style="width:15%" class="bg-yellow-400 h-4"></div>
         </div>
 </div>
 <div>
     <div class="flex flex-wrap justify-start my-5">
         <div class="mr-5">
              <div class="float-left mr-1 bg-purple-400 rounded-full w-5 h-5"></div>
              <span class="text-sm align-top">Donations</span>
         </div>
         <div class="mr-5">
             <div class="float-left mr-1 bg-green-400 rounded-full w-5 h-5"></div>
             <span class="text-sm align-top">Savings</span>
         </div>
         <div class="mr-5">
             <div class="float-left mr-1 bg-yellow-400 rounded-full w-5 h-5"></div>
             <span class="text-sm align-top">Loan</span>
         </div>
     </div>
 </div>

                      
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:30%" class="bg-gradient-to-r from-cyan-500 to-blue-500 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:50%" class="bg-gradient-to-r from-sky-500 to-indigo-500 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:60%" class="bg-gradient-to-r from-violet-500 to-fuchsia-500 h-4 rounded-l-lg"></div>
 </div>
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" role="progressbar">
     <div style="width:70%" class="bg-gradient-to-r from-purple-500 to-pink-500 h-4 rounded-l-lg"></div>
 </div>

                      
 <div class="bg-gray-300 rounded-lg h-4 my-2" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" role="progressbar">
   <div style="width:30%" class="motion-safe:animate-pulse bg-purple-600 h-4 rounded-l-lg"></div>
 </div>