search

themesberg / flowbite-react

Official React components built for Flowbite and Tailwind CSS
https://flowbite-react.com
MIT License
1.9k stars 425 forks source link

Add support for indeterminate progress bars #1479

Open mridang opened 2 months ago

mridang commented 2 months ago

Summary

There is a progress component but it doesn't support an indeterminate mode. I'm unsure how to add this as I'm still dealing with the steep learning curve here. I've found an example.

https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar

The link may die so I've cannibalised the markup to show how other's have accomplished this.


  | <!doctype html>
-- | --
  | <html lang="en">
  | <head>
  | <meta charset="utf-8">
  | <meta http-equiv="X-UA-Compatible" content="IE=edge">
  | <meta name="viewport" content="width=device-width, initial-scale=1">
  | <link rel="apple-touch-icon" sizes="180x180" href="https://www.creative-tim.com/twcomponents/apple-touch-icon.png">
  | <link rel="icon" type="image/png" sizes="32x32" href="https://www.creative-tim.com/twcomponents/favicon-32x32.png">
  | <link rel="icon" type="image/png" sizes="16x16" href="https://www.creative-tim.com/twcomponents/favicon-16x16.png">
  | <link rel="manifest" href="https://www.creative-tim.com/twcomponents/site.webmanifest">
  | <link rel="mask-icon" href="https://www.creative-tim.com/twcomponents/safari-pinned-tab.svg" color="#0ed3cf">
  | <meta name="msapplication-TileColor" content="#0ed3cf">
  | <meta name="theme-color" content="#0ed3cf">
  | <meta property="og:image" content="https://tailwindcomponents.com/storage/10230/conversions/temp47943-ogimage.jpg?v=2024-09-02 09:10:11" />
  | <meta property="og:image:width" content="1280" />
  | <meta property="og:image:height" content="640" />
  | <meta property="og:image:type" content="image/png" />
  | <meta property="og:url" content="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar/landing" />
  | <meta property="og:title" content="Tailwind CSS Indeterminate Progress Bar by felipehimself" />
  | <meta property="og:description" content="Elevate user experience with the Tailwind CSS Indeterminate Progress Bar component. Effortlessly convey ongoing processes and enhance visual feedback with this dynamic and customizable element." />
  | <meta name="twitter:card" content="summary_large_image" />
  | <meta name="twitter:site" content="@TwComponents" />
  | <meta name="twitter:title" content="Tailwind CSS Indeterminate Progress Bar by felipehimself" />
  | <meta name="twitter:description" content="Elevate user experience with the Tailwind CSS Indeterminate Progress Bar component. Effortlessly convey ongoing processes and enhance visual feedback with this dynamic and customizable element." />
  | <meta name="twitter:image" content="https://tailwindcomponents.com/storage/10230/conversions/temp47943-ogimage.jpg?v=2024-09-02 09:10:11" />
  | <link rel="canonical" href="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar" itemprop="URL">
  | <title>Tailwind CSS Indeterminate Progress Bar by felipehimself. </title>
  | <script src="https://cdn.tailwindcss.com"></script>
  | </head>
  | <body class="bg-gray-200">
  | <div class="fixed bottom-0 left-0 right-0 z-40 px-4 py-3 text-center text-white bg-gray-800">
  | This is a Tailwind CSS Indeterminate Progress Bar by felipehimself.
  | <a class="text-gray-200 underline" href="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar">Component details</a>
  | </div>
  | <p class="text-center mb-8">Scroll down on the Show Code tab to see the <code class="bg-white p-2 rounded-lg">tailwind.config.js</code> custom code and the <code class="bg-white p-2 rounded-lg">final component</code> syntax for accomplishing this result.</p>
  | <div class="w-full">
  | <div class="h-1.5 w-full bg-pink-100 overflow-hidden">
  | <div class="progress w-full h-full bg-pink-500 left-right"></div>
  | </div>
  | </div>
  | <style>
  | /* You must add these custom styles below to your tailwind.config.js file
  | Right below are the syntax for doing that using tailwind.config.js
  | You can also check the docs on this https://tailwindcss.com/docs/animation
  |  
  |  
  | tailwind.config.js Syntax
  |  
  | theme : {
  | extend: {
  | animation: {
  | progress: 'progress 1s infinite linear',
  | },
  | keyframes: {
  | progress: {
  | '0%': { transform: ' translateX(0) scaleX(0)' },
  | '40%': { transform: 'translateX(0) scaleX(0.4)' },
  | '100%': { transform: 'translateX(100%) scaleX(0.5)' },
  | },
  | },
  | transformOrigin: {
  | 'left-right': '0% 50%',
  | }
  | }
  |  
  | }
  |  
  | Tailwind component Syntax
  |  
  | <div className='w-full'>
  | <div className='h-1.5 w-full bg-pink-100 overflow-hidden'>
  | <div className='animate-progress w-full h-full bg-pink-500 origin-left-right'></div>
  | </div>
  | </div>
  |  
  | */
  |  
  | .progress {
  | animation: progress 1s infinite linear;
  | }
  |  
  | .left-right {
  | transform-origin: 0% 50%;
  | }
  | @keyframes progress {
  | 0% {
  | transform:  translateX(0) scaleX(0);
  | }
  | 40% {
  | transform:  translateX(0) scaleX(0.4);
  | }
  | 100% {
  | transform:  translateX(100%) scaleX(0.5);
  | }
  | }
  | </style>
  | <script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8bcc5f9a6e798343","serverTiming":{"name":{"cfL4":true}},"version":"2024.8.0","token":"1b7cbb72744b40c580f8633c6b62637e"}' crossorigin="anonymous"></script>
  | </body>
  | </html>
  |  

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="180x180" href="https://www.creative-tim.com/twcomponents/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://www.creative-tim.com/twcomponents/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.creative-tim.com/twcomponents/favicon-16x16.png">
<link rel="manifest" href="https://www.creative-tim.com/twcomponents/site.webmanifest">
<link rel="mask-icon" href="https://www.creative-tim.com/twcomponents/safari-pinned-tab.svg" color="#0ed3cf">
<meta name="msapplication-TileColor" content="#0ed3cf">
<meta name="theme-color" content="#0ed3cf">
<meta property="og:image" content="https://tailwindcomponents.com/storage/10230/conversions/temp47943-ogimage.jpg?v=2024-09-02 09:10:11" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="og:image:type" content="image/png" />
<meta property="og:url" content="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar/landing" />
<meta property="og:title" content="Tailwind CSS Indeterminate Progress Bar by felipehimself" />
<meta property="og:description" content="Elevate user experience with the Tailwind CSS Indeterminate Progress Bar component. Effortlessly convey ongoing processes and enhance visual feedback with this dynamic and customizable element." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@TwComponents" />
<meta name="twitter:title" content="Tailwind CSS Indeterminate Progress Bar by felipehimself" />
<meta name="twitter:description" content="Elevate user experience with the Tailwind CSS Indeterminate Progress Bar component. Effortlessly convey ongoing processes and enhance visual feedback with this dynamic and customizable element." />
<meta name="twitter:image" content="https://tailwindcomponents.com/storage/10230/conversions/temp47943-ogimage.jpg?v=2024-09-02 09:10:11" />
<link rel="canonical" href="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar" itemprop="URL">
<title>Tailwind CSS Indeterminate Progress Bar by felipehimself. </title>
<script src="https://cdn.tailwindcss.com/"></script>
</head>
<body class="bg-gray-200">
<div class="fixed bottom-0 left-0 right-0 z-40 px-4 py-3 text-center text-white bg-gray-800">
This is a Tailwind CSS Indeterminate Progress Bar by felipehimself.
<a class="text-gray-200 underline" href="https://www.creative-tim.com/twcomponents/component/indeterminate-progress-bar">Component details</a>
</div>
<p class="text-center mb-8">Scroll down on the Show Code tab to see the <code class="bg-white p-2 rounded-lg">tailwind.config.js</code> custom code and the <code class="bg-white p-2 rounded-lg">final component</code> syntax for accomplishing this result.</p>
<div class="w-full">
<div class="h-1.5 w-full bg-pink-100 overflow-hidden">
<div class="progress w-full h-full bg-pink-500 left-right"></div>
</div>
</div>
<style>
/* You must add these custom styles below to your tailwind.config.js file 
 Right below are the syntax for doing that using tailwind.config.js 
 You can also check the docs on this https://tailwindcss.com/docs/animation 

tailwind.config.js Syntax

theme : {
    extend: {
        animation: {
        progress: 'progress 1s infinite linear',
      },
      keyframes: {
        progress: {
          '0%': { transform: ' translateX(0) scaleX(0)' },
          '40%': { transform: 'translateX(0) scaleX(0.4)' },
          '100%': { transform: 'translateX(100%) scaleX(0.5)' },
        },
      },
      transformOrigin: {
        'left-right': '0% 50%',
      }
    }

}

Tailwind component Syntax

<div className='w-full'>
      <div className='h-1.5 w-full bg-pink-100 overflow-hidden'>
        <div className='animate-progress w-full h-full bg-pink-500 origin-left-right'></div>
      </div>
</div>

*/

.progress {
  animation: progress 1s infinite linear;
}

.left-right {
    transform-origin: 0% 50%;
}
    @keyframes progress {
    0% {
        transform:  translateX(0) scaleX(0);
    }
    40% {
        transform:  translateX(0) scaleX(0.4);
    }
    100% {
        transform:  translateX(100%) scaleX(0.5);
    }
}
</style>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"rayId":"8bcc5f9a6e798343","serverTiming":{"name":{"cfL4":true}},"version":"2024.8.0","token":"1b7cbb72744b40c580f8633c6b62637e"}' crossorigin="anonymous"></script>
</body>
</html>

Context

I want to show a progress bar that is indeterminate.

rluders commented 2 months ago

This actually needs to be first supported by standard flowbite library.

MiroslavPetrik commented 2 months ago

The base flowbite could also use the native <progress /> HTML element. It has default indeterminate animation when the value is null. The indeterminate state can be styled with :indeterminate selector and the bar with ::progress-bar pseudo element.

For example Pico css does it