Components : Progress Tracking Group

Preview content adapted to proportion

Progress Tracking Group

Timeline

Ideal for visualizing quarterly or monthly progress, achievements, or goals in a user-friendly manner.

Displays a group of progress tracking cards, each with a unique icon, title, and animated progress bars.

Hover effects on cards for scaling and rotation, interactive elements like progress bars and icons. Clickable elements for further details.


Adapts to different screen sizes with responsive grid layouts, flexbox alignments, and media queries for optimal display on mobile, tablet, and desktop.

Date : June 02, 2025
Views : 56
Copys : 0

fa-tags

Dashboard overview Project management Performance tracking Analytics presentation

Code

<div class="group relative min-h-screen p-8 sm:grid sm:grid-cols-2 sm:gap-6 lg:flex lg:flex-col lg:gap-0 xl:grid xl:grid-cols-3 xl:gap-8">
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🕒
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q1
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     📌
    </span>
    <span class="text-2xl">
     📊
    </span>
   </div>
  </div>
 </div>
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🌟
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q2
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     🚀
    </span>
    <span class="text-2xl">
     💡
    </span>
   </div>
  </div>
 </div>
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🎯
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q3
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     🏆
    </span>
    <span class="text-2xl">
     📈
    </span>
   </div>
  </div>
 </div>
</div>


<template>
 <div class="group relative min-h-screen p-8 sm:grid sm:grid-cols-2 sm:gap-6 lg:flex lg:flex-col lg:gap-0 xl:grid xl:grid-cols-3 xl:gap-8">
  <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
   <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
    <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
     🕒
    </div>
    <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
    </div>
   </div>
   <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
    <div class="mb-2 flex items-center justify-between">
     <span class="text-sm font-medium text-gray-700">
      2023 Q1
     </span>
     <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
      ➤
     </div>
    </div>
    <div class="space-y-2">
     <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
     </div>
     <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
     </div>
    </div>
    <div class="mt-4 flex gap-2 text-gray-400">
     <span class="text-2xl">
      📌
     </span>
     <span class="text-2xl">
      📊
     </span>
    </div>
   </div>
  </div>
  <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
   <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
    <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
     🌟
    </div>
    <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
    </div>
   </div>
   <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
    <div class="mb-2 flex items-center justify-between">
     <span class="text-sm font-medium text-gray-700">
      2023 Q2
     </span>
     <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
      ➤
     </div>
    </div>
    <div class="space-y-2">
     <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
     </div>
     <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
     </div>
    </div>
    <div class="mt-4 flex gap-2 text-gray-400">
     <span class="text-2xl">
      🚀
     </span>
     <span class="text-2xl">
      💡
     </span>
    </div>
   </div>
  </div>
  <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
   <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
    <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
     🎯
    </div>
    <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
    </div>
   </div>
   <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
    <div class="mb-2 flex items-center justify-between">
     <span class="text-sm font-medium text-gray-700">
      2023 Q3
     </span>
     <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
      ➤
     </div>
    </div>
    <div class="space-y-2">
     <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
     </div>
     <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
     </div>
    </div>
    <div class="mt-4 flex gap-2 text-gray-400">
     <span class="text-2xl">
      🏆
     </span>
     <span class="text-2xl">
      📈
     </span>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default {
    name: 'MyTimelineComponent',
    data() {
        return {
        
        }
    },
    methods: {
    },
    mounted() {
    },
    beforeUnmount() {
    }
}
</script>
<style scoped="">
</style>



import React from "react";
const MyTimelineComponent = () => {
    return (
<div>
<div class="group relative min-h-screen p-8 sm:grid sm:grid-cols-2 sm:gap-6 lg:flex lg:flex-col lg:gap-0 xl:grid xl:grid-cols-3 xl:gap-8">
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🕒
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q1
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     📌
    </span>
    <span class="text-2xl">
     📊
    </span>
   </div>
  </div>
 </div>
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🌟
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q2
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     🚀
    </span>
    <span class="text-2xl">
     💡
    </span>
   </div>
  </div>
 </div>
 <div class="relative flex items-start gap-4 p-4 transition-all duration-300 hover:scale-105 hover:rotate-[3deg] sm:hover:rotate-0 lg:flex-col lg:items-center xl:flex-row">
  <div class="flex flex-shrink-0 items-center gap-3 lg:flex-col">
   <div class="h-8 w-8 rounded-full bg-gradient-to-r from-blue-900 to-emerald-400 p-1.5 text-white shadow-lg">
    🎯
   </div>
   <div class="h-1 w-12 bg-gray-200 sm:h-12 sm:w-1 lg:h-1 lg:w-12 xl:h-12 xl:w-1">
   </div>
  </div>
  <div class="rounded-lg bg-white p-6 shadow-md transition-shadow duration-300 hover:shadow-lg active:scale-95">
   <div class="mb-2 flex items-center justify-between">
    <span class="text-sm font-medium text-gray-700">
     2023 Q3
    </span>
    <div class="h-4 w-4 rotate-90 transform bg-white text-emerald-400">
     ➤
    </div>
   </div>
   <div class="space-y-2">
    <div class="h-3 w-full animate-pulse rounded-full bg-gray-100">
    </div>
    <div class="h-3 w-2/3 animate-pulse rounded-full bg-gray-100">
    </div>
   </div>
   <div class="mt-4 flex gap-2 text-gray-400">
    <span class="text-2xl">
     🏆
    </span>
    <span class="text-2xl">
     📈
    </span>
   </div>
  </div>
 </div>
</div>

</div>
    )
}
export default MyTimelineComponent;

Recommended Related Components

More+

Progress Tracking Group

Ideal for visualizing quarterly or monthly progress, achievements, or goals in a user-friendly manner.

56
0

Project Timeline Cards

Ideal for showcasing project milestones, updates, or achievements in a visually appealing manner.

32
0

Interactive Timeline Components

They are used to present a series of events or milestones in a visually appealing and interactive manner.

18
0

Event Timeline Component

The component is used to present a series of events or milestones in a structured and engaging manner. It's ideal for websites, apps, or landing pages that need to showcase a chronological sequence of activities.

6
0