{"id":339,"date":"2025-03-28T15:38:59","date_gmt":"2025-03-28T15:38:59","guid":{"rendered":"https:\/\/mandelasolutions.com\/?p=339"},"modified":"2025-03-28T15:41:25","modified_gmt":"2025-03-28T15:41:25","slug":"enhance-your-powerapps-with-a-stylish-svg-loading-animation","status":"publish","type":"post","link":"https:\/\/mandelasolutions.com\/index.php\/2025\/03\/28\/enhance-your-powerapps-with-a-stylish-svg-loading-animation\/","title":{"rendered":"Enhance Your PowerApps with a Stylish SVG Loading Animation"},"content":{"rendered":"\n<p>Enhancing user experience in PowerApps is crucial, and a custom SVG loading spinner can make your app feel more dynamic and professional. Try this sleek, animated SVG loader with a spinning circle and bold red text saying \u201cLOADING PLEASE WAIT.\u201d By embedding the SVG as an encoded image, you can seamlessly integrate it into your PowerApps. This approach ensures a lightweight, visually appealing, and responsive loading indicator without relying on external images or heavy animations. <\/p>\n\n\n<figure class=\"wp-block-post-featured-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1512\" height=\"944\" src=\"https:\/\/mandelasolutions.com\/wp-content\/uploads\/2025\/03\/LoaingSpinner.gif\" class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\" alt=\"\" style=\"object-fit:cover;\" \/><\/figure>\n\n\n<p>Just copy and paste the YAML code in your canvas app<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>- LoaingImage:\n    Control: Image@2.2.3\n    Properties:\n      DisplayMode: =DisplayMode.View\n      Fill: =RGBA(56, 96, 178, 0.1)\n      Height: =Parent.Height\n      Image: |\n        =$\"data:image\/svg+xml;utf-8, {EncodeUrl(\"&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='100%' height='100%' viewBox='0 0 100 100'&gt;\n\n        &lt;style&gt;\n            .loading-text {\n                font-family: Arial, sans-serif;\n                font-size: 5px;\n                font-weight: bold;\n                fill: red;\n                text-anchor: middle;\n            }\n            .spinner {\n                animation: rotate 2s linear infinite;\n                transform-origin: 50px 50px;\n            }\n            @keyframes rotate {\n                0% { transform: rotate(0deg); }\n                100% { transform: rotate(360deg); }\n            }\n            .track {\n                fill: none;\n                stroke: #ccc;\n                stroke-width: 3;\n            }\n            .circle {\n                fill: none;\n                stroke: #010069;\n                stroke-width: 3;\n                stroke-linecap: round;\n                stroke-dasharray: 45, 100;\n                stroke-dashoffset: 0;\n                animation: dash 1.5s ease-in-out infinite;\n            }\n            @keyframes dash {\n                0% { stroke-dasharray: 1, 100; stroke-dashoffset: 0; }\n                50% { stroke-dasharray: 45, 100; stroke-dashoffset: -25; }\n                100% { stroke-dasharray: 45, 100; stroke-dashoffset: -75; }\n            }\n        &lt;\/style&gt;\n\n        &lt;!-- Bold red loading text ABOVE the circle --&gt;\n        &lt;text x='50' y='25' class='loading-text'&gt;Loading, please wait&lt;\/text&gt;\n\n        &lt;!-- Smaller static circle track --&gt;\n        &lt;circle class='track' cx='50' cy='50' r='15'&gt;&lt;\/circle&gt;\n\n        &lt;!-- Smaller spinning progress circle --&gt;\n        &lt;g class='spinner'&gt;\n            &lt;circle class='circle' cx='50' cy='50' r='15'&gt;&lt;\/circle&gt;\n        &lt;\/g&gt;\n\n        &lt;\/svg&gt;\")}\"\n      Transparency: =\n      Width: =Parent.Width\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Enhancing user experience in PowerApps is crucial, and a custom SVG loading spinner can make your app feel more dynamic and professional. Try this sleek, animated SVG loader with a spinning circle and bold red text saying \u201cLOADING PLEASE WAIT.\u201d By embedding the SVG as an encoded image, you can<\/p>\n<div class=\"belowpost\"><a class=\"btnmore icon-arrow\" href=\"https:\/\/mandelasolutions.com\/index.php\/2025\/03\/28\/enhance-your-powerapps-with-a-stylish-svg-loading-animation\/\"><span>Read More<\/span><\/a><\/div>\n","protected":false},"author":1,"featured_media":340,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[8],"tags":[],"class_list":["post-339","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-powerapps"],"_links":{"self":[{"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/posts\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/comments?post=339"}],"version-history":[{"count":3,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/posts\/339\/revisions"}],"predecessor-version":[{"id":346,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/posts\/339\/revisions\/346"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/media\/340"}],"wp:attachment":[{"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/media?parent=339"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/categories?post=339"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mandelasolutions.com\/index.php\/wp-json\/wp\/v2\/tags?post=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}