Feedback progressbar

Glass Progress

Linear progress bar with glass effect.

Uploading files... 75%
Storage used 45%

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { GlassProgress } from 'astro-component-kit';
---

<div class="progress-stack">
  <div class="flex-between mb-2">
    <span>Uploading assets...</span>
    <span>75%</span>
  </div>
  <GlassProgress value={75} />
  
  <div class="flex-between mt-4 mb-2">
    <span>Processing data...</span>
    <span>40%</span>
  </div>
  <GlassProgress value={40} />
</div>
--- import { GlassProgress } from 'astro-component-kit'; --- <div class="progress-stack"> <div class="flex-between mb-2"> <span>Uploading assets...</span> <span>75%</span> </div> <GlassProgress value={75} /> <div class="flex-between mt-4 mb-2"> <span>Processing data...</span> <span>40%</span> </div> <GlassProgress value={40} /> </div>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/GlassProgress.astro and paste the following code:

astro 
---
/**
 * GlassProgress — A horizontal linear progress bar with glassmorphism and gradient fill.
 * 
 * @param {number} value - The current progress from 0 to 100.
 * @param {string} label - Optional accessible label message.
 */
interface Props {
  value: number;
  label?: string;
}

const { value, label = "Progress bar" } = Astro.props;
---

<div 
  class="progress-container" 
  role="progressbar" 
  aria-valuenow={value} 
  aria-valuemin="0" 
  aria-valuemax="100"
  aria-label={label}
>
  <div class="progress-fill" style={`width: ${Math.min(100, Math.max(0, value))}%`}></div>
</div>

<style>
  .progress-container { 
    height: 10px; 
    background: var(--c-bg-elev, rgba(255,255,255,0.05)); 
    border-radius: var(--r-full, 10px); 
    overflow: hidden; 
    border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
    width: 100%;
  }
  
  .progress-fill { 
    height: 100%; 
    background: linear-gradient(90deg, var(--c-primary, #6366f1), var(--c-primary-light, #c084fc)); 
    border-radius: inherit; 
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 0 0 10px rgba(99,102,241,0.3); 
  }
</style>
--- /** * GlassProgress — A horizontal linear progress bar with glassmorphism and gradient fill. * * @param {number} value - The current progress from 0 to 100. * @param {string} label - Optional accessible label message. */ interface Props { value: number; label?: string; } const { value, label = "Progress bar" } = Astro.props; --- <div class="progress-container" role="progressbar" aria-valuenow={value} aria-valuemin="0" aria-valuemax="100" aria-label={label} > <div class="progress-fill" style={`width: ${Math.min(100, Math.max(0, value))}%`}></div> </div> <style> .progress-container { height: 10px; background: var(--c-bg-elev, rgba(255,255,255,0.05)); border-radius: var(--r-full, 10px); overflow: hidden; border: 1px solid var(--c-border, rgba(255,255,255,0.1)); width: 100%; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--c-primary, #6366f1), var(--c-primary-light, #c084fc)); border-radius: inherit; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 0 10px rgba(99,102,241,0.3); } </style>

Quick Info

Category
Feedback
Filename
GlassProgress.astro
Dependencies
None — pure Astro + CSS
Tags
progressbar