Svelte Gauge

A customizable and animated gauge component built with Svelte, perfect for visualizing progress, performance metrics, or other numerical data.

🎮 Demo

Experience the Svelte Gauge in action: Try it in the Svelte Playground

📦 Installation

Install the package via npm:

npm install svelte-gauge

🛠 Usage

Import the component and use it in your Svelte application:

<script>
  import Gauge from "svelte-gauge";
</script>

<Gauge
  value={value}
  start={0}
  stop={100}
  stroke={20}
  color={"red"}
  labels={["One", "Two", "Three"]}
  segments={[
    [0, 33],
    [34, 66],
    [67, 100],
  ]}
  width="300px"
  class="custom-gauge"
/>