Skip to content

Commit 96eeeb3

Browse files
committed
doc: add loader prop description
1 parent 51d53cc commit 96eeeb3

File tree

1 file changed

+18
-1
lines changed

1 file changed

+18
-1
lines changed

README.md

+18-1
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,8 @@ After you have initialized the component, use it everywhere you want in your app
7474
dash="60 0.9"
7575
animation="reverse 700 400"
7676
:noData="false"
77-
:loading="false"
77+
:loading="false"
78+
:loader="{ color: 'green' }"
7879
fontColor="white"
7980
:half="false"
8081
:gap="10"
@@ -115,6 +116,7 @@ This table below provides a quick overview over all available options. To gain m
115116
| **[`legendFormatter`](#legendformatter)** [![npm](https://img.shields.io/badge/v1.3.0-blue?style=flat-square)](#legendformatter) | Function | Function that returns formatted value | |
116117
| **[`animation`](#animation)** | String | "default \| rs \| loop \| reverse \| bounce [duration delay]" | "default 1000 400"|
117118
| **[`loading`](#loading)** | Boolean | |false|
119+
| **[`loader`](#loading)** | Object | { [thickness, color, lineMode, line, opacity ]} | |
118120
| **[`determinate`](#determinate)** | Boolean | |false|
119121
| **[`noData`](#nodata)** | Boolean | |false|
120122
| **[`angle`](#angle)** | Number | any Number |-90|
@@ -406,6 +408,21 @@ Forces loading state. The component provides an indeterminate loading state for
406408

407409
<br>
408410

411+
- ### `loader`
412+
413+
With this option defined as Object you can customize the loading circle that is shown in the states
414+
[loading](#loading) and [determinate](#determinate). Accepted properties are [`color`](#color), [`thickness`](#thickness), [`line`](#line),
415+
[`lineMode`](#linemode) and `opactity`. `opacity` is specific for loading circle and can be any valid CSS opacity value.
416+
417+
###### Example: :scroll:
418+
419+
```vue
420+
<vue-ellipse-progress :loader="{ color: 'green', lineMode: 'in 10', opacity: '0.5' }" />
421+
422+
```
423+
424+
<br>
425+
409426
- ### `determinate`
410427

411428
Provides a determinate loading state that indicates that your data loading is still in progress but allows to show the **[`progress`](#progress)**.

0 commit comments

Comments
 (0)