Progress components can be used to show user progress, how far along a download is, etc.



astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Progress } from "agnostic-react";
export const YourComponent = () => <Progress value={30} max={100} />

React: component source, storybook tests

Vue 3 logoVue 3

View source
<script setup>
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { Progress } from "agnostic-vue";
  <Progress :value="30" :max="100" />

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
  import 'agnostic-svelte/css/common.min.css';
  import { Progress } from "agnostic-svelte";
<Progress value={30} max={100} />

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

  selector: 'your-component',
  template: `<div>
    <ag-progress [value]="30" [max]="100"></ag-progress>
export class YourComponent {}

Angular: component source, storybook tests


You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.