vue-simple-arc

SimpleArc

Lightweight Vue 3 SVG arc / circle progress component. Animated, responsive, accessible, server-side rendered and with zero runtime dependencies (~1.6 kB gzip).

Installation

npm i vue-simple-arc

Import

import { SimpleArc } from 'vue-simple-arc';
// or: import SimpleArc from 'vue-simple-arc';

SimpleArcComponent is still exported as an alias of SimpleArc for backward compatibility.

TypeScript

The props type is exported:

import type { SimpleArcProps } from 'vue-simple-arc';

Usage

<SimpleArc
    :value="percentage"
    width="350px"
    :fullCircle="false"
    :thickness="8"
    color="#41b883"
    trackColor="#80808040"
    aria-label="Sales goal"
>
    <strong>{{ Math.round(percentage * 100) }}%</strong>
</SimpleArc>

Props

Animation

Value changes animate with a CSS transition on the progress line, including from and back to 0. Customize it with CSS variables on the component or any ancestor:

.my-gauge { --simple-arc-duration: 1s; --simple-arc-easing: cubic-bezier(.2, .8, .2, 1); }

The animation is turned off automatically when the user prefers reduced motion. Resizing never triggers it.

SSR / Nuxt

The arc is fully rendered on the server, so there is no empty SVG waiting for hydration. Before the component is mounted it draws with a 200px reference width and scales it to the container: in larger containers the line looks proportionally thicker, and the height can shift by a few pixels (proportional to thickness) once hydration measures the real width.

Migrating from 0.2

No breaking changes. secondColor still works but is deprecated: rename it to trackColor. The track thickness can now be set with trackThickness (the default stays thickness / 5).

Slot

The default slot is placed at the bottom center of the half arc, or at the center of the full circle. It inherits the parent's font size and color.

Accessibility

The root element has role="progressbar", aria-valuemin="0", aria-valuemax="100" and aria-valuenow (the value as a percentage). Pass aria-label or aria-labelledby to describe what is being measured.