dialog.py

import gradio as gr


def get_dialog_box():
    return gr.HTML("""
            <div style="display: flex; align-items: center; justify-content: center; min-height: 80vh;">
            <div style="display: flex; flex-direction: column; align-items: center;"> 
                <!-- Spinner -->
                <div class="loader" style="margin-top: 20px;"></div>
                <!-- Message -->
                <h2 style="color: orange; font-family: trebuchet ms, sans-serif; align-items: center;">The service is not working, please refresh or try again later!</h2>
            </div>
            </div>
    
            <!-- Spinner CSS -->
            <style>
                /* HTML: <div class="loader"></div> */
                .loader {
                  width: 120px;
                  height: 22px;
                  border-radius: 40px;
                  color: orange !important;
                  border: 2px solid;
                  position: relative;
                  overflow: hidden;
                }
                .loader::before {
                  content: "";
                  position: absolute;
                  margin: 2px;
                  width: 14px;
                  top: 0;
                  bottom: 0;
                  left: -20px;
                  border-radius: inherit;
                  background: currentColor;
                  box-shadow: -10px 0 12px 3px currentColor;
                  clip-path: polygon(0 5%, 100% 0,100% 100%,0 95%,-30px 50%);
                  animation: l14 1s infinite linear;
                }
                @keyframes l14 {
                  100% {left: calc(100% + 20px)}
                }
            </style>
            """)