|
| 1 | +--- |
| 2 | +title: Put a loading sign in a Blazor app |
| 3 | +description: How to put a loading animation in your client-side Blazor app. |
| 4 | +type: how-to |
| 5 | +page_title: Loading Sign for Client Blazor App |
| 6 | +slug: common-client-app-loading-sign |
| 7 | +position: |
| 8 | +tags: |
| 9 | +ticketid: 1406319 |
| 10 | +res_type: kb |
| 11 | +--- |
| 12 | + |
| 13 | +## Description |
| 14 | + |
| 15 | +While the client-side Blazor app is loading and spinning up, you may want to show a beautiful loading message to your users so they know something is happening. |
| 16 | + |
| 17 | + |
| 18 | + |
| 19 | +## Solution |
| 20 | + |
| 21 | +To have a loading sign in a Blazor app, you must use HTML and CSS and put the desired content inside the `app` element. The Blazor framework will remove its contents and replace them with the actual application once it has fully loaded. |
| 22 | + |
| 23 | +The loading message cannot be a Blazor component, because it is shown before the actual SPA has initialized in the browser. |
| 24 | + |
| 25 | +>caption A sample collection of HTML and CSS that provides a loading message for a client-side Blazor app. Place this in your `wwwroot/index.html` file. |
| 26 | +
|
| 27 | +```` |
| 28 | +<!DOCTYPE html> |
| 29 | +<html> |
| 30 | +<head> |
| 31 | + <style> |
| 32 | + /* This CSS is specific to the current HTML. |
| 33 | + Note that this snippet only contains the necessary changes and not the full Blazor app template */ |
| 34 | + .loading-section { |
| 35 | + text-align: center; |
| 36 | + height: 80vh; |
| 37 | + display: flex; |
| 38 | + flex-direction: column; |
| 39 | + justify-content: center; |
| 40 | + } |
| 41 | +
|
| 42 | + .loading-section h2 { |
| 43 | + color: #00b5dc; |
| 44 | + } |
| 45 | +
|
| 46 | + .loader-dot { |
| 47 | + height: 20px; |
| 48 | + width: 20px; |
| 49 | + border-radius: 50%; |
| 50 | + background-color: #00b5dc; |
| 51 | + display: inline-block; |
| 52 | + -webkit-animation: grow 2.1s infinite ease-in-out both; |
| 53 | + animation: grow 2.1s infinite ease-in-out both; |
| 54 | + } |
| 55 | +
|
| 56 | + .loader-dot.dot1 { |
| 57 | + -webkit-animation-delay: -0.96s; |
| 58 | + animation-delay: -0.96s; |
| 59 | + } |
| 60 | +
|
| 61 | + .loader-dot.dot2 { |
| 62 | + -webkit-animation-delay: -0.48s; |
| 63 | + animation-delay: -0.48s; |
| 64 | + } |
| 65 | +
|
| 66 | + @-webkit-keyframes grow { |
| 67 | + 0%, 80%, 100% { |
| 68 | + -webkit-transform: scale(0) |
| 69 | + } |
| 70 | +
|
| 71 | + 40% { |
| 72 | + -webkit-transform: scale(1.0) |
| 73 | + } |
| 74 | + } |
| 75 | + </style> |
| 76 | +</head> |
| 77 | +<body> |
| 78 | + <app> |
| 79 | + <div class="loading-section"> |
| 80 | + <h2>Telerik Blazor Loading Template</h2> |
| 81 | + <div class="short-description">You can easily customize this loading sign to match your needs.</div> |
| 82 | + <div class="loader mt-5"> |
| 83 | + <div class="loader-dot dot1"></div> |
| 84 | + <div class="loader-dot dot2"></div> |
| 85 | + <div class="loader-dot dot3"></div> |
| 86 | + </div> |
| 87 | + </div> |
| 88 | + </app> |
| 89 | +</body> |
| 90 | +</html> |
| 91 | +```` |
| 92 | + |
| 93 | +>tip You can put this CSS in your existing stylesheet. You can also customize the code, contents and appearance so they match your application design. You can even write it up using a pre-processor like SASS and take colors and variales from your main styles. |
| 94 | +
|
0 commit comments