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

1.2k

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

Multi Step form with javascript
A Beautiful multi step form using HTML CSS and JS

Author:
Walid Ahmad

1 year ago

1.3k
Card post blog
Targetas para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

252
Card blog
Targeta para blog

Author:
Raul antonio de la cruz hernandez

2 months ago

145
Portfolio About & Skills

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

1 year ago

2.3k
avtarCard3

Author:
pablitodgb

7 months ago

983
Card
Card Layout in Tailwind as React Compoment

Author:
Deepak Sharma

1 year ago

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

Author:
Rajesh Maheshwari

11 months ago

1.1k
Responsive Card

Author:
ariaw

10 months ago

656
Card responsive and dark mode grid

Author:
Cristian

1 year ago

1.9k
Targeta
Targeta

Author:
Raul antonio de la cruz hernandez

2 months ago

303
Dynamic Service Showcase with Interactive Flip Cards
This component presents a visually engaging service section featuring interactive flip cards. Each service card displays an image on the front and reveals details on the back when hovered over. The layout is responsive, ensuring seamless adaptability across various screen sizes. The hover effect adds a modern and engaging touch, enhancing user interaction.

Author:
Vikas Kushwah

10 months ago

1.5k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

893

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components