LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

Progress

The Progress component creates a progress bar/circle

PreviousPasswordNextRadio

Last updated 3 years ago

Was this helpful?

Props:

Properties
Types
Description
Required?
Default

determinate

number

progress value 0 will be a loading animation, and 1 - 100 will be the percentage filled

undefined

label

string

adds and aria-label to component

undefined

shape

ProgressShape

Circular

size

StyleSize

None, Small: 20px, Medium: 40px and, Large: 60px (Note None defaults to Medium)

Medium

Examples

import { whisper } from "@oliveai/ldk"
import { 
  NewWhisper,
  ProgressShape,
  StyleSize,
  UpdateWhisper, 
  Whisper, 
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const validateNumberInput = ((number: number) => {
  if (number < 0) {

    return{ updateProgress: false, message: "Number can't be less than 0!" };
  } else if (number > 100) {

    return { updateProgress: false, message: "Number can't be greater than 100!" };
  } else if (number === null) {

    return { updateProgress: false, message: "Input must be a number!" };
  } else {

    return { updateProgress: true, message: '' };
  }
})

const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
  return {
    label: 'Progress Example',
    components: [
      {
        type: WhisperComponentType.Number,
        label: "Number 0-100",
        max: 100,
        min: 0,
        step: 1,
        tooltip: "Input a number 0 through 100",
        validationError: validationError,
        onChange: async (error: Error, params: number, whisper: Whisper)=>{
          const {updateProgress, message} = validateNumberInput(params);
          const value = updateProgress ? params : progressValue;
          whisper.update(progressExampleConfig(value, message));
        }
      },
      {
        type: WhisperComponentType.Progress,
        determinate: progressValue,
        shape: ProgressShape.Linear,
        size: StyleSize.Medium
      }
    ]
  }
})

const newProgressExampleConfig = (async () => {
  await whisper.create(progressExampleConfig(0, '') as NewWhisper);
})

newProgressExampleConfig();
import { whisper } from "@oliveai/ldk"
import { 
  NewWhisper,
  ProgressShape,
  StyleSize,
  UpdateWhisper, 
  Whisper, 
  WhisperComponentType 
} from "@oliveai/ldk/dist/whisper"

const validateNumberInput = ((number: number) => {
  if (number < 0) {

    return{ updateProgress: false, message: "Number can't be less than 0!" };
  } else if (number > 100) {

    return { updateProgress: false, message: "Number can't be greater than 100!" };
  } else if (number === null) {

    return { updateProgress: false, message: "Input must be a number!" };
  } else {

    return { updateProgress: true, message: '' };
  }
})

const progressExampleConfig = ( (progressValue: number, validationError: string): NewWhisper | UpdateWhisper => {
  return {
    label: 'Progress Example',
    components: [
      {
        type: WhisperComponentType.Number,
        label: "Number 0-100",
        max: 100,
        min: 0,
        step: 1,
        tooltip: "Input a number 0 through 100",
        validationError: validationError,
        onChange: async (error: Error, params: number, whisper: Whisper)=>{
          const {updateProgress, message} = validateNumberInput(params);
          const value = updateProgress ? params : progressValue;
          whisper.update(progressExampleConfig(value, message));
        }
      },
      {
        type: WhisperComponentType.Progress,
        determinate: progressValue,
        shape: ProgressShape.Linear,
        size: StyleSize.Medium
      }
    ]
  }
})

const newProgressExampleConfig = (async () => {
  await whisper.create(progressExampleConfig(0, '') as NewWhisper);
})

newProgressExampleConfig();

ProgressShape.Linear: ProgressShape.Circular:

Number input to update progress bar