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 “LOADING PLEASE WAIT.” 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.

Just copy and paste the YAML code in your canvas app

- LoaingImage:
    Control: Image@2.2.3
    Properties:
      DisplayMode: =DisplayMode.View
      Fill: =RGBA(56, 96, 178, 0.1)
      Height: =Parent.Height
      Image: |
        =$"data:image/svg+xml;utf-8, {EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 100 100'>

        <style>
            .loading-text {
                font-family: Arial, sans-serif;
                font-size: 5px;
                font-weight: bold;
                fill: red;
                text-anchor: middle;
            }
            .spinner {
                animation: rotate 2s linear infinite;
                transform-origin: 50px 50px;
            }
            @keyframes rotate {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            .track {
                fill: none;
                stroke: #ccc;
                stroke-width: 3;
            }
            .circle {
                fill: none;
                stroke: #010069;
                stroke-width: 3;
                stroke-linecap: round;
                stroke-dasharray: 45, 100;
                stroke-dashoffset: 0;
                animation: dash 1.5s ease-in-out infinite;
            }
            @keyframes dash {
                0% { stroke-dasharray: 1, 100; stroke-dashoffset: 0; }
                50% { stroke-dasharray: 45, 100; stroke-dashoffset: -25; }
                100% { stroke-dasharray: 45, 100; stroke-dashoffset: -75; }
            }
        </style>

        <!-- Bold red loading text ABOVE the circle -->
        <text x='50' y='25' class='loading-text'>Loading, please wait</text>

        <!-- Smaller static circle track -->
        <circle class='track' cx='50' cy='50' r='15'></circle>

        <!-- Smaller spinning progress circle -->
        <g class='spinner'>
            <circle class='circle' cx='50' cy='50' r='15'></circle>
        </g>

        </svg>")}"
      Transparency: =
      Width: =Parent.Width