docs: Update Loader examples and breaking changes

Author: Dimo Dimov

_contentTemplates/loaders/themeColor.md

@@ -19,25 +19,23 @@ These predefined options match the main [Telerik Theme]({%slug general-informati
 
 ![Loader Theme Colors](images/loader-built-in-theme-colors.png)
 
-<!--
 ````CSHTML
 @{
-    var fields = typeof(Telerik.Blazor.ThemeColors)
+    var fields = typeof(ThemeConstants.Loader.ThemeColor)
                     .GetFields(System.Reflection.BindingFlags.Public | System.Reflection.BindingFlags.Static |
                        System.Reflection.BindingFlags.FlattenHierarchy)
                     .Where(fi => fi.IsLiteral && !fi.IsInitOnly).ToList();
     foreach (var f in fields)
     {
         string color = f.GetValue(null).ToString();
-        <div style="float: left; margin: 20px;">
+        <div style="display: inline-block; margin: 20px;">
             @color
             <br /><br />
             <TelerikLoader ThemeColor="@color"></TelerikLoader>
         </div>
     }
 }
 ````
--->
 
 The `ThemeColor` parameter renders as the `k-loader-<ThemeColor>` CSS class on the wrapping element and you can set it to a custom value to cascade through and set the color to a setting of your own without customizing the entire theme.
 
@@ -47,7 +45,7 @@ The `ThemeColor` parameter renders as the `k-loader-<ThemeColor>` CSS class on t
 
 ````CSHTML
 <style>
-    .k-loader-custom-color .k-loader-segment::after {
+    .k-loader-custom-color .k-loader-segment {
         background-color: cyan;
     }
 </style>

components/loadercontainer/overview.md

@@ -87,7 +87,7 @@ The LoaderContainer provides the following features:
 
 * `LoaderType` - `enum` - controls the shape of the loader indicator. Takes a member of the `Telerik.Blazor.Component.LoaderType` enum. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
 
-* `Size` - `string` - controls the size of the loader indicator. Use a static property from the `ThemeConstants.Loader.Size` class - `Size.Small`, `Size.Medium` (default) or `Size.Large`. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
+* `Size` - `string` - controls the size of the loader indicator, when a `Template` is *not* used. Use a static property from the `ThemeConstants.Loader.Size` class - `Size.Small`, `Size.Medium` (default) or `Size.Large`. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
 
 * `LoaderPosition` - `enum` - configures the position of the loader indicator against the `Text` parameter. Takes a member of the `Telerik.Blazor.Components.LoaderPosition`. You can find more information and examples in the [Appearance]({%slug loadercontainer-appearance%}) article.
 

upgrade/breaking-changes/3-0-0.md

@@ -273,7 +273,45 @@ async Task OnGridStateInit(GridStateEventArgs<GridModel> args)
 </table>
 
 - **DateInput** – removed `ParsingErrorMessage` (obsolete since version 2.8) in favor of `DateInput_ParsingErrorMessage` [localization string]({%slug globalization-localization%}).
-- **Loader**, **LoaderContainer** - changed [`Size` parameter]({%slug loader-appearance%}#size) type from `LoaderSize` enum to `string`. The default value of `Size` is `ThemeConstants.Loader.Size.Medium`. There is a new static class `Telerik.Blazor.ThemeConstants.Loader.Size` with a predefined set of size properties.
+
+- **Loader**, **LoaderContainer** - changed [`Size` parameter]({%slug loader-appearance%}#size) type from `LoaderSize` enum to `string` (example below). The default value of `Size` is `ThemeConstants.Loader.Size.Medium`. There is a new static class `Telerik.Blazor.ThemeConstants.Loader.Size` with a predefined set of size properties.
+- **Loader**, **LoaderContainer** - changed [`ThemeColor` parameter]({%slug loader-appearance%}#themecolor) type from `ThemeColors` enum to `string`. The default value of `ThemeColor` is `ThemeConstants.Loader.ThemeColor.Primary`. There is a new static class `Telerik.Blazor.ThemeConstants.Loader.ThemeColor` with a predefined set of properties.
+
+>caption Loader and LoaderContainer in UI for Blazor up to version 2.30 and after version 3.0
+
+<table>
+    <thead><tr>
+        <th>UI for Blazor 2.30</th>
+        <th>UI for Blazor 3.0</th>
+    </tr></thead>
+    <tbody>
+        <tr>
+            <td style="vertical-align:top">
+<pre><code>
+&lt;TelerikLoader
+    Size="@LoaderSize.Large"
+    ThemeColor="@ThemeColors.Tertiary" /&gt;
+
+&lt;TelerikLoaderContainer
+    Size="@LoaderSize.Large"
+    ThemeColor="@ThemeColors.Tertiary" /&gt;
+</code></pre>
+            </td>
+            <td style="vertical-align:top">
+<pre><code>
+&lt;TelerikLoader
+    Size="@ThemeConstants.Loader.Size.Large"
+    ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary" /&gt;
+
+&lt;TelerikLoaderContainer
+    Size="@ThemeConstants.Loader.Size.Large"
+    ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary" /&gt;
+</code></pre>
+            </td>
+        </tr>
+    </tbody>
+</table>
+
 - **TextBox**, **MaskedTextBox**, **TextArea** - `Label` parameter is removed. In 3.2.0 release we will release standalone Floating Label component. In the meantime, you can use the following [KB that shows how to add the label]({%slug inputs-kb-floating-label %}).
 - **TileLayout** - introduced optional `Id` attribute for the `TileLayoutItem`. The `OnResize` event handler will receive argument of type `TileLayoutResizeEventArgs`. The `OnReorder` event handler will receive argument of type `TileLayoutReorderEventArgs`. Both event arguments will point to the tile item (`args.Id`) and define if the component should re-render after the event (`args.ShouldRender`).