Fixes examples, clarifies deep animation

docs/content/2.elements/10.progress.md

@@ -110,7 +110,7 @@ excludedProps:
 
 #### Custom animation
 
-Ultimately, you can bring your own animation through the `deep()` selector by targeting the progress bar.
+Ultimately, you can bring your own animation through the `deep()` selector by targeting the progress bar. Note that the `<progress>` tag must be targeted differently on each browser.
 
 ::component-example
 #default
@@ -204,32 +204,25 @@ You can use the `#indicator` slot to show a custom indicator above the progress
 #code
 ```vue
 <script setup>
-  const temp = ref(35)
-
-  const color = computed(() => {
-    if (temp.value < 10) {
-      return 'blue'
-    }
-
-    if (temp.value < 20) {
-      return 'amber'
-    }
-
-    if (temp.value < 30) {
-      return 'orange'
-    }
-
-    return 'red'
-  })
+const temp = ref(35)
+
+const color = computed(() => {
+  switch (true) {
+    case temp.value < 10: return 'blue'
+    case temp.value < 20: return 'amber'
+    case temp.value < 30: return 'orange'
+    default: return 'red'
+  }
+})
 </script>
 
 <template>
   <UProgress :value="temp" :max="40" :color="color">
     <template #indicator="{ percent }">
       <div class="text-right" :style="{ width: `${percent}%` }">
-        <span v-if="temp < 10" class="text-blue-500">Too cold!</span>
-        <span v-if="temp < 20" class="text-amber-500">Warm</span>
-        <span v-if="temp < 30" class="text-orange-500">Hot</span>
+        <span v-if="color === 'red'" class="text-blue-500">Too cold!</span>
+        <span v-else-if="color === 'amber'" class="text-amber-500">Warm</span>
+        <span v-else-if="color === 'orange'" class="text-orange-500">Hot</span>
         <span v-else class="text-red-500 font-bold">🔥 Too hot!</span>
       </div>
     </template>