How to use @pluralsight/ps-design-system-circularprogress - 3 common examples

const ref = useRef()
  React.useImperativeHandle(forwardedRef, () => ref.current)

  const handleClear = evt => {
    if (ref.current) {
      ref.current.value = ''
      ref.current.focus()
    }

    onClear(evt)
  }

  const clearBtn = onClear && 

  const icon = loading ? (
    
  ) : (
    
  )

  return (
    
  )
})

<p>Install the component dependency:</p>
      <code>
        npm install @pluralsight/ps-design-system-circularprogress
      </code>

      <p>Include a React component in your project:</p>
      <code>
        import CircularProgress from
        '@pluralsight/ps-design-system-circularprogress'
      </code>

      medium,
            <span>
              standard size for widget (from <code>CircularProgress.sizes</code>
              )
            </span>
          ]),
          PropTypes.row([
            'value',
            'number',
            null,
            null,
            'current progress out of 100'
          ])
        ]}
      /&gt;

PropTypes.row([
            'value',
            'number',
            null,
            null,
            'current progress out of 100'
          ])
        ]}
      />

      Size
      <p>Circular progress comes in two standard sizes.</p>
      
            ``
        )}
      /&gt;

      Mode
      <p>
        Mode is determined by the presence of the <code>value</code> prop. When
        a value is given the mode is "determinate", and visual progress is set
        to that static value. When a value is absent the mode is "indeterminate"
        and becomes an infinite spinner.
      </p>
      `, ``]}