PFM Shared

Appearance

Лоудеры ​

Используются для визуализации состояния загрузки.

В проекте присутствует 2 лоудера.

  1. Спиннер
  2. Прогресс бар

Спиннер ​

Для разработчиков ​

Цвета SVG заданы как currentColor, поэтому для передачи цвета в компонент достаточно повесить стиль. Размер компонента занимает 100% размера родителя, но можно передать размер в SCSS явно

Пример

Vue
<template>
    <div class="pfm-circular-loader-example">
        <PfmCircularLoader class="spinner" />
    </div>
</template>
<style scoped lang="scss">
    .spinner{
        height: 100px;
        width: 100px;
    }
</style>

Прогресс бар ​

прогресс в %

бесконечный цикл

TODO: добавить PFM input

Для разработчиков ​

ts
interface Props {
    /**
     * Передавать прогресс от 0 до 100
     * Если передать null то будет цикличная анимация
    */ 
    progress?: Nullable<number>
}

const props = withDefaults(defineProps<Props>(), {
    progress: null
})