@xexiu/astro-progress-bar

🚀 astro-modal

HELLO there 👋

• Twitter: https://twitter.com/xexiudev drop by and say hi, follow me and I follow you. Let's build a community.

HTML, CSS and a bit of javascript made with Custom Elements progress bar for astro. Uses API from browsers. Compatible with web/mobile, responsive, HTML5 semantic, SEO friendly. Lighthouse score 100%. Uses Custom Elements for a better optimization: customElements.define('xe-progress-bar', ProgressBar);

---

Forking and giving a star will contribute to my motivation in making components for astro (react, react-native, etc...) that are purely HTML, CSS, SEO friendly and responsive :) (almost all components :P).

---

DEMO: Astro Progress-Bar This product is actively mantained. Any PR, issues or whatever concern, please visit the Github repository https://github.com/xexiu/astro-components.

Tutorials Roadmap

• Web2: JavaScript, HTML, CSS, Node.js, Python (MLL, AI), React, NextJS React Native and more.
• Web3: Blockchain, WEB3, dApps, smart contracts and more.

📦 Installation

• Using bun:

bun i @xexiu/astro-progress-bar

• Using npm:

npm i @xexiu/astro-progress-bar

🔁 API

interface Props {
    classes?: string; // Optional
    excludeElementSelector?: string; // Optional
}

🛠 Usage in astro

---
// more personal/code imports
import ProgressBar from '@xexiu/astro-progress-bar';
---

<div class="container">
<ProgressBar />
<p>MY VERY LONG ARTICLE/WHATEVER</p>
</div>

If classes are NOT specified, the progress bar has default styles.

---

 ¡Chao pescao! 👋 🐠