docs(progressbar):Revamp Overview (#1053)

* docs(progressbar):Revamp Overview

* docs(progressbar): remove duplicated example with timer

* docs(progressbar):minor fix

* docs(progressbar):label customization update

* Update components/progressbar/label.md

Co-authored-by: Dimo Dimov <[email protected]>

* Update components/progressbar/overview.md

Co-authored-by: Dimo Dimov <[email protected]>

Co-authored-by: Dimo Dimov <[email protected]>

Author: ntacheva

components/progressbar/label.md

@@ -10,7 +10,9 @@ position: 5
 
 # Label for the ProgressBar
 
-The label for the ProgressBar is a text representation of the completion of the task. By default the value of completion is shown as percent `%`. This article explains how to customize the label for the `<TelerikProgressBar>`. 
+The label for the ProgressBar is a text representation of the completion of the task. By default, the value shows as percent `%` since the default `Max` value is `100`. If you are using a different `Max` value, then override the default label, otherwise the percent value will appear inaccurate.
+
+This article explains how to customize the ProgressBar label position and content.
 
 To access the customization settings use the `<ProgressBarLabel>`. It provides a `Context` which exposes a `Value` parameter which is representation of the current value of the component.
 
@@ -60,6 +62,6 @@ The `Template` allows you to control the entire rendering of the label for the P
 
 ## See Also
 
-  * [Live Demo: ProgressBar Overview](https://demos.telerik.com/blazor-ui/progressbar/overview)
+  * [Live Demo: ProgressBar Label](https://demos.telerik.com/blazor-ui/progressbar/label)
   * [Overview]({%slug progressbar-overview%})
   * [Indeterminate state]({%slug progressbar-indeterminate-state%})

components/progressbar/overview.md

@@ -12,14 +12,12 @@ position: 0
 
 The <a href = "https://www.telerik.com/blazor-ui/progressbar" target = "_blank">Blazor ProgressBar component</a> tracks the execution of operations and displays what portion of it is completed. For very long tasks, you can also make it [indeterminate]({%slug progressbar-indeterminate-state%}).
 
+## Creating Blazor ProgressBar
 
-## Basic ProgressBar
+1. Use the `<TelerikProgressBar>` tag.
+1. Set its `Value` parameter to a `double` to denote how much is completed.
 
-To use the Telerik ProgressBar in your Blazor application:
-* add the `<TelerikProgressBar>` tag.
-* set its `Value` parameter to denote how much is completed.
-
-![progress-bar basic example](images/progress-bar-basic-example.png)
+>caption ProgressBar with maximum and initial values
 
 ````CSHTML
 @*Set the maximum and the current values of the ProgressBar*@
@@ -32,38 +30,17 @@ To use the Telerik ProgressBar in your Blazor application:
 }
 ````
 
+## Label
 
->caption Component namespace and reference
-
-````CSHTML
-<TelerikProgressBar Max="@MaxValue" Value="@PBValue" @ref="MyProgressBar" />
-
-@code {
-    Telerik.Blazor.Components.TelerikProgressBar MyProgressBar { get; set; }
-    
-    public double MaxValue { get; set; } = 50;
-    public double PBValue { get; set; } = 10;
-}
-````
-
-## Features
-
-The ProgressBar provides the following features:
+The label is a text representation of the current progress. It is rendered inside the ProgressBar and by default shows the component value in percent. The [ProgressBar allows customization of the label position and content]({%slug progressbar-label%}). Use the label template to override the default percent label if the ProgressBar `Max` is not `100`.
 
-* `Class` - the CSS class that will be rendered on the main wrapping element. You can use it to cascade styles more easily.
-* `Max` - `double`, defaults to `100` - the maximum value of the ProgressBar. It must be greater than `0`.
-* `Value` - `double` - the value of the ProgressBar. This value indicates the progress of the tracked process. It is a fraction of the `Max`.
-* `Orientation` - you can control the orientation of the ProgressBar, through the `ProgressBarOrientation` enum, with members:
-    * `Horizontal` - this is the default value
-    * `Vertical`
-* `Indeterminate` - `bool`, defaults to `false` - see the [Indeterminate]({%slug progressbar-indeterminate-state%}) article for more information.
-* `Label` - see the [Label]({%slug progressbar-label%}) article for more information. Shows the `Value` with a `%` sign by default
+## Indeterminate State
 
-## Examples
+In some scenarios the estimated time of completion is unknown or the progress cannot be strictly measured. The ProgressBar supports continuous animation that can cover these cases. [Read more about the ProgressBar Indeterminate State...]({%slug progressbar-indeterminate-state%})
 
-### Responsive ProgressBar
+## Responsive ProgressBar
 
->caption The ProgressBar will resize with the parent element dimensions when you set its width to 100%
+The ProgressBar will resize with the parent element dimensions when you set its width to 100%:
 
 ````CSHTML
 <div style="width: 50%; border: 1px solid red;">
@@ -78,72 +55,22 @@ The ProgressBar provides the following features:
 </div>
 ````
 
-### Use a Timer to simulate the completion of a task
-
-![progress bar with timer example](images/progress-bar-timer-example.gif)
-
-````CSHTML
-@using System.Timers
-@implements IDisposable
-
-<TelerikButton ThemeColor="primary" OnClick="@StartProgress">Start</TelerikButton>
-
-<br />
+## ProgressBar Parameters
 
-<TelerikProgressBar Max="@MaxValue" Value="@PBValue" Indeterminate="@isIndeterminate">
-</TelerikProgressBar>
-
-@code {
-    public double MaxValue { get; set; } = 100;
-    public double PBValue { get; set; } = 10;
-    public bool isIndeterminate { get; set; } = false;
-
-    public Timer Timer { get; set; } = new Timer();
-
-    public void Dispose()
-    {
-        StopProgress();
-        Timer?.Close();
-    }
-
-    public void StartProgress()
-    {
-        if (Timer?.Enabled == false)
-        {
-            Timer.Interval = 200;
-            Timer.Elapsed -= OnTimerElapsedEvent;
-            Timer.Elapsed += OnTimerElapsedEvent;
-            Timer.AutoReset = true;
-            Timer.Start();
-        }
-    }
+The ProgressBar provides the following features to further customize its behavior:
 
-    public void OnTimerElapsedEvent(Object source, ElapsedEventArgs e)
-    {
-        if (PBValue < MaxValue)
-        {
-            UpdateProgress();
-        }
-        else
-        {
-            StopProgress();
-        }
-    }
+@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
-    public void UpdateProgress()
-    {
-        PBValue += 5;
+| Attribute | Type and Default Value | Description |
+|----------|----------|----------|
+| `Class` | `string` | The CSS class that will be rendered on the main wrapping element. You can use it to cascade styles more easily.
+| `Max` | `double` <br/> 100 | The maximum value of the ProgressBar. It must be greater than `0`.
+| `Value` | `double` | The value of the ProgressBar. This value indicates the progress of the tracked process. It is a fraction of the `Max`.
+| `Orientation` | `ProgressBarOrientation` enum <br/> (`ProgressBarOrientation.Horizontal`) | The orientation of the ProgressBar. Takes a member of the `ProgressBarOrientation` enum - `Horizontal` or `Vertical`.
 
-        InvokeAsync(StateHasChanged);
-    }
+## Next Steps
 
-    public void StopProgress()
-    {
-        Timer?.Stop();
-        InvokeAsync(StateHasChanged);
-    }
-}
-````
+* [Customize the ProgressBar Label]({%slug progressbar-label%})
 
 ## See Also