Progress

Deadline tomorrow.

Example

Basic

Show Code

<script lang="ts" setup>
import { RProgress, RSpace } from 'roughness'
</script>

<template>
  <RSpace vertical>
    <RProgress :value="0.1" />
    <RProgress :value="0.4" type="primary">Primary</RProgress>
    <RProgress :value="0.1" type="info">Info</RProgress>
    <RProgress :value="0.5" type="success">Success</RProgress>
    <RProgress :value="0.9" type="warning">Warning</RProgress>
    <RProgress :value="0.2" type="error">Error</RProgress>
    <RProgress :value="0.6" type="comment">Comment</RProgress>
  </RSpace>
</template>

Primary

Info

Success

Warning

Error

Comment

Animation

COMMENT

You need to install gsap yourself.

Show Code

<script lang="ts" setup>
import gsap from 'gsap'
import { RProgress, RSlider, RSpace } from 'roughness'
import { reactive, ref, watch } from 'vue'

let value = ref(0)
let tweened = reactive({ number: 0 })

watch(value, n => {
  gsap.to(tweened, { duration: 1, number: n / 100 })
})
</script>

<template>
  <RSpace vertical>
    <RProgress :value="tweened.number" />
    <RSlider v-model="value" />
  </RSpace>
</template>

Usage

Props

Name	Type	Default Value	Description
graphicsOptions
max
min
size
type
value		Required

Slots

Name	Type	Description
default

Styles

Name	Type	Default Value	Description
--r-progress-color
--r-progress-block-size
--r-progress-inline-size
--r-progress-border-color
--r-progress-border-width
--r-progress-border-dash