first

documentation/progress/v-progress-base-documentation.md

@@ -0,0 +1,32 @@
+### VProgress
+
+Vuero provides a nice and clean `<VProgress />` component that
+can be used almost anywhere, across a wide variety of layouts.
+Use the `size` prop to change the progress bar thickness.
+3 size modifiers are available: `tiny`, `smaller` and `small`.
+
+<!--code-->
+
+```vue
+<template>
+  <VProgress size="tiny" :value="65" />
+  <VProgress size="smaller" :value="90" />
+  <VProgress size="small" :value="31" />
+  <VProgress :value="15" />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+    <div class="control">
+        <VProgress size="tiny" :value="65" />
+        <VProgress size="smaller" :value="90" />
+        <VProgress size="small" :value="31" />
+        <VProgress :value="15" />
+    </div>
+</div>
+
+<!--/example-->

documentation/progress/v-progress-colors-documentation.md

@@ -0,0 +1,51 @@
+### VProgress colors
+
+Vuero provides a nice and clean `<VProgress />` component that
+can be used almost anywhere, across a wide variety of layouts.
+Use the `color` prop to change the progress bar color.
+5 color modifiers are available: `primary`, `success`, `info`,
+`warning` and `danger`.
+
+<!--code-->
+
+```vue
+<template>
+  <VProgress size="tiny" :value="70" />
+  <VProgress
+    size="tiny"
+    color="success"
+    :value="55"
+  />
+  <VProgress
+    size="tiny"
+    color="info"
+    :value="45"
+  />
+  <VProgress
+    size="tiny"
+    color="warning"
+    :value="60"
+  />
+  <VProgress
+    size="tiny"
+    color="danger"
+    :value="38"
+  />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+    <div class="control">
+        <VProgress size="tiny" :value="70" />
+        <VProgress size="tiny" color="success" :value="55" />
+        <VProgress size="tiny" color="info" :value="45" />
+        <VProgress size="tiny" color="warning" :value="60" />
+        <VProgress size="tiny" color="danger" :value="38" />
+    </div>
+</div>
+
+<!--/example-->

documentation/progress/v-progress-undeterminate-documentation.md

@@ -0,0 +1,33 @@
+### Undeterminate progress
+
+In some particular use cases, you might want to show an undetermined progress.
+If you want your progress bars to show an undetermined state,
+you just need to omit the `value` prop. The CSS will take care of the rest.
+
+<!--code-->
+
+```vue
+<template>
+  <VProgress size="tiny" />
+  <VProgress size="tiny" color="success" />
+  <VProgress size="tiny" color="info" />
+  <VProgress size="tiny" color="warning" />
+  <VProgress size="tiny" color="danger" />
+</template>
+```
+
+<!--/code-->
+
+<!--example-->
+
+<div class="field">
+    <div class="control">
+        <VProgress size="tiny" />
+        <VProgress size="tiny" color="success" />
+        <VProgress size="tiny" color="info" />
+        <VProgress size="tiny" color="warning" />
+        <VProgress size="tiny" color="danger" />
+    </div>
+</div>
+
+<!--/example-->