Relsa

Relsa is a javascript-made horizontal progress bar with switchable steps

Generate Convert Improve

Install / Use

/learn @0leg53/Relsa

About this skill

Quality Score

0/100

README

<h1> Relsa 🚂</h1> <p> <img alt="Tests coverage" src="https://github.com/0leg53/relsa/blob/main/coverage/badge.svg" /> <a href="https://www.npmjs.com/package/relsa"><img src="https://badge.fury.io/js/relsa.svg" alt="npm version"></a> <a href="#" target="_blank"> <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-limone.svg" /> </a> </p>

Relsa is javascript-made horizontal progress bar with switchable steps. No dependencies. My first project btw :)

🏠 Homepage

Install

npm install relsa

Usage

Include css- and js- files to page:

<link rel="stylesheet" href="../dist/relsa.css" />
<script src="../dist/relsa.js"></script>

import Relsa from 'relsa';
import '~/node_modules/relsa/module/relsa.css';

Add block with selector classname:

<body>
  <div class="relsa"></div>
</body>

Call the Relsa's instance with 'container' property:

var relsa = new Relsa({
  container: '.relsa',
});

Options and methods:

Options:

container (String), default: ".relsa-container" — selector for Relsa's render node.
render (Number), default: 4 — sets quanity of rendering dots in Relsa.
startIndex (Number), default: 1 — sets initial active dot.
customDotClassName (String), default: "" — adds custom classname for dots.
isResponsive (Boolean), default: true — add compact view for small screens (max-width: 426px).

Methods:

setNext() — sets next active dot
setPrev() — sets previous active dot
setActiveItem(index) — sets active dot by index

Contacts

👤 Oleg Sergeev

Github: @0leg53
LinkedIn: @sergeevoleg
Telegram: @sergeevoleg

🤝 Contributing

Contributions, issues and feature requests are highly welcome! <br /> Feel free to check issues page. <br /> Also you can help me with this README :)

Show your support

Press project's ⭐️

Send 💸💰💸 here

README was generated by readme-md-generator

Related Skills

node-connect

343.1k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

90.0k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

343.1k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

343.1k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。