feat(VProgressCircular): port to v3

[blalan05]

Resolves #11922

Markup:

<template>
  <v-app>
    <div class="ma-12 pa-12">
      <v-progress-circular model-value="50" />
      <v-progress-circular model-value="50" />
      <v-progress-circular model-value="50" indeterminate />
      <v-progress-circular model-value="50" color="blue" />
      <v-progress-circular model-value="50" color="blue" size="x-large" />
      <v-progress-circular
        model-value="50"
        color="blue"
        size="48"
        width="12"
      />
    </div>
  </v-app>
</template>

<script>
  export default {

  }
</script>

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Improvement/refactoring (non-breaking change that doesn't add any features but makes things better)

Checklist:

• The PR title is no longer than 64 characters.
• The PR is submitted to the correct branch (master for bug fixes and documentation updates, dev for new features and backwards compatible changes and next for non-backwards compatible changes).
• My code follows the code style of this project.
• I've added relevant changes to the documentation (applies to new features and breaking changes in core library)

[nekosaur]

• I added support for using small, large, x-large size values to keep things consistent with other components
• Re-added intersection observer functionality
• Added bg-color prop. This one I'm a bit unsure of. I think it would be very nice to be able to set background circle color (since it is already possible in progress-linear). However I'm not sure what the default value should be. The current surface color is just white. Something like grey-lighten-1 looks pretty good, but then it will look different if users disable material colors

edit:

• also I rotated it 90 degrees ccw so that 0 is at the 12 o'clock position

[johnleider]

Can we add different animations? Such as:

These are just a few examples / ideas. Does the @vuetifyjs/core-team think that my suggestions are within the scope of this component?

[blalan05]

Adding different styles/options could be interesting, but it brings up the question of how much outside of Google MD do we want to implement/provide?

Another question, what would the syntax be to select the style desired, which one is default?
<v-progressive-circular type="growing-dots" />?

[KaelWD]

I don't think that's necessary.