BswupProgress

Progress component

bit Bswup has its own Progress component to simplify the process of implementing a sophisticated UI widget to show the update progress.

The BswupProgress component can be used to implement a customizable update progress easily. In order to use this component first add its script tag to the default document of your app:

<script src="_content/Bit.Bswup/bit-bswup.progress.js"></script>

Then you can use it in your app like this:

<div>
    <BswupProgress AppContainer="#app-container" AutoReload=false>
        <div class="bswup-progress-text" />
        <svg class="bswup-container">
            <circle r="40%" cx="50%" cy="50%" />
            <circle r="40%" cx="50%" cy="50%" />
        </svg>
    </BswupProgress>
    <button id="bit-bswup-reload">Update available, Click to Reload</button>
</div>

#bit-bswup {
    top: 2px;
    left: 50%;
    display: none;
    z-index: 999999;
    position: fixed;
    text-align: center;
    transform: translateX(-50%);
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI";
}

#bit-bswup .bswup-container {
    width: 3rem;
    height: 3rem;
    display: block;
    position: relative;
}

#bit-bswup .bswup-container circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.2rem;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

#bit-bswup .bswup-container circle:last-child {
    stroke: #1b6ec2;
    transition: stroke-dasharray 0.05s ease-in-out;
    stroke-dasharray: calc(3.141 * var(--bit-bswup-percent, 0%) * 0.8), 500%;
}

#bit-bswup .bswup-progress-text {
    top: 50%;
    left: 50%;
    font-size: 12px;
    position: absolute;
    text-align: center;
    font-weight: normal;
    transform: translate(-50%, -50%);
}

#bit-bswup .bswup-progress-text::after {
    content: var(--bit-bswup-percent-text, "");
}

#bit-bswup-reload {
    top: 10px;
    right: 10px;
    display: none;
    position: fixed;
}

The parameters of this component are as follows:

AutoReload: if the BswupProgress should auto-reload the app after downloading the new update. The default value is true.

ShowAssets: if the BswupProgress should show the assets list in its default UI. The default value is false.

ShowLogs: if the BswupProgress should show the logs of its process in the console of the web browser. The default value is false.

HideApp: if the BswupProgress should hide the main app's UI in the process of the update progress. The default value is false.

AppContainer: the css selector of the blazor app container element. The default value is "#app".

Handler: the custom js handler function to do custom additional tasks in Bswup events. The default value is null.

As you can see in the above example, you can provide your own custom UI and use it instead of the default UI of the BswupProgress component.

Note: In the case of using a custom UI, you can use the following custom CSS properties to access the progress

--bit-bswup-percent: the number value of the current progress percent.

--bit-bswup-percent-text: the string (text) value of the current progress percent with % character at the end of it.

Service Worker