Home
Md. Tofayel islam
progress bar

progress bar

This tailwind example is contributed by Md. Tofayel islam, on 28-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Progress Bar Blog Card

Author Md. Tofayel islam

Fork Fullscreen

<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.7.3/dist/alpine.min.js" defer></script>
<div class="min-h-screen py-20 px-10 bg-gray-100">
  <div class="grid grid-cols-1 gap-20 lg:grid-cols-2 lg:gap-10">
    <div class="flex items-center flex-wrap max-w-md px-10 bg-white shadow-xl rounded-2xl h-20"
       x-data="{ circumference: 50 * 2 * Math.PI, percent: 80 }"
       >
          <div class="flex items-center justify-center -m-6 overflow-hidden bg-white rounded-full">
            <svg class="w-32 h-32 transform translate-x-1 translate-y-1" x-cloak aria-hidden="true">
              <circle
                class="text-gray-300"
                stroke-width="10"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
                />
              <circle
                class="text-blue-600"
                stroke-width="10"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="circumference - percent / 100 * circumference"
                stroke-linecap="round"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
               />
            </svg>
            <span class="absolute text-2xl text-blue-700" x-text="`${percent}%`"></span>
          </div>
          <p class="ml-10 font-medium text-gray-600 sm:text-xl">Performance</p>

<span class="ml-auto text-xl font-medium text-blue-600 hidden sm:block">+25%</span>
      </div>
    
    
    <div class="flex items-center flex-wrap max-w-md px-10 bg-white shadow-xl rounded-2xl h-20"
       x-data="{ circumference: 50 * 2 * Math.PI, percent: 90 }"
       >
          <div class="flex items-center justify-center -m-6 overflow-hidden bg-white rounded-full">
            <svg class="w-32 h-32 transform translate-x-1 translate-y-1" x-cloak aria-hidden="true">
              <circle
                class="text-gray-300"
                stroke-width="10"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
                />
              <circle
                class="text-red-600"
                stroke-width="10"
                :stroke-dasharray="circumference"
                :stroke-dashoffset="circumference - percent / 100 * circumference"
                stroke-linecap="round"
                stroke="currentColor"
                fill="transparent"
                r="50"
                cx="60"
                cy="60"
               />
            </svg>
            <span class="absolute text-2xl text-red-700" x-text="`${percent}%`"></span>
          </div>
          <p class="ml-10 font-medium text-gray-600 sm:text-xl">Storage</p>

Related Examples

Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.8k
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.3k
Tailwind CSS Blog Card

Author:
Morris Muriuki Muthigani

4 months ago

298
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

2 months ago

208
Social Proof
Composant de preuve sociale👌

Author:
Ousmane CISSE

1 month ago

111
Radial Progress Indicator with TailwindCSS
A sleek and customizable radial progress indicator built with SVG and styled using TailwindCSS. The progress bar is animated with smooth transitions, featuring a circular background, dynamic progress, and centered text or optional imagery. Perfect for showcasing percentages, stats, or any progress-related metrics in your projects.

Author:
SHARIFUL ISLAM

9 months ago

1.9k
Beautiful and Responsive Card Component
Modern, professional and responsive card component for the blog/services/info

Author:
Rajesh Maheshwari

9 months ago

901
Status bar

Author:
Maxim

10 months ago

778
Portfolio About & Skills

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

10 months ago

2.2k
Gradient progress bar

Author:
Kofi Osei

2 years ago

15k
Card grid for blog Posts / Articles

Author:
Abhijit Sen

2 years ago

23.9k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

7 months ago

472

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components