Progress

<div class="w-full">
  <dv-progress />
  <dv-progress :value="10" />
  <dv-progress :value="70" />
  <dv-progress :value="100" />
</div>
vue

<div class="w-full">
  <dv-progress type="primary" />
  <dv-progress :value="10" type="primary" />
  <dv-progress :value="70" type="primary" />
  <dv-progress :value="100" type="primary" />
</div>
vue

<div class="w-full">
  <dv-progress type="secondary" />
  <dv-progress :value="10" type="secondary" />
  <dv-progress :value="70" type="secondary" />
  <dv-progress :value="100" type="secondary" />
</div>
vue

<div class="w-full">
  <dv-progress type="accent" />
  <dv-progress :value="10" type="accent" />
  <dv-progress :value="70" type="accent" />
  <dv-progress :value="100" type="accent" />
</div>
vue

<div class="w-full">
  <dv-progress type="info" />
  <dv-progress :value="10" type="info" />
  <dv-progress :value="70" type="info" />
  <dv-progress :value="100" type="info" />
</div>
vue

<div class="w-full">
  <dv-progress type="success" />
  <dv-progress :value="10" type="success" />
  <dv-progress :value="70" type="success" />
  <dv-progress :value="100" type="success" />
</div>
vue

<div class="w-full">
  <dv-progress type="warning" />
  <dv-progress :value="10" type="warning" />
  <dv-progress :value="70" type="warning" />
  <dv-progress :value="100" type="warning" />
</div>
vue

<div class="w-full">
  <dv-progress type="error" />
  <dv-progress :value="10" type="error" />
  <dv-progress :value="70" type="error" />
  <dv-progress :value="100" type="error" />
</div>
vue

<dv-radial-progress :value="70" />
vue

<div class="w-full space-x-6 text-center">
  <dv-radial-progress :value="0" />
  <dv-radial-progress :value="20" />
  <dv-radial-progress :value="60" />
  <dv-radial-progress :value="80" />
  <dv-radial-progress :value="100" />
</div>
vue

<div
  class="w-full text-center grid grid-cols-2 lg:grid-cols-4 gap-4 justify-items-center"
>
  <dv-radial-progress :value="60" />
  <dv-radial-progress :value="60" type="primary" />
  <dv-radial-progress :value="60" type="secondary" />
  <dv-radial-progress :value="60" type="accent" />
  <dv-radial-progress :value="60" type="info" />
  <dv-radial-progress :value="60" type="success" />
  <dv-radial-progress :value="60" type="warning" />
  <dv-radial-progress :value="60" type="error" />
</div>
vue

<div class="w-full space-x-6 text-center">
  <dv-radial-progress :value="50" class="text-red-500">Red</dv-radial-progress>
  <dv-radial-progress
    :value="20"
    class="text-white bg-blue-400 border-blue-400 border-4"
  />
</div>
vue

<div class="w-full space-x-6 space-y-6 text-center">
  <dv-radial-progress
    :value="70"
    size="12rem"
    thickness="2px"
    class="text-2xl"
  />
  <dv-radial-progress :value="70" size="12rem" thickness="10px" />
</div>
vue