zammad/app/views/init/spinner-loading.html.erb

<style>
*, ::before, ::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #656567;
}
body,
html,
#loading-app,
#app[data-loaded="true"] {
  height: 100%;
}
html {
  background-color: var(--background-primary);
}
body,
html {
  margin: 0;
}
#loading-app {
  display: flex;
}
.loading-animation {
  margin: 0 auto;
  display: block;
  vertical-align: middle;
}
.loading-animation.error {
  filter: blur(1px);
}
.loading-animation.error * {
  animation: none !important;
}
.loading-main {
  margin: auto;
}
.loading-sr-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.loading-failed {
  position: relative;
  opacity: 0;
  color: #fff;
  font-weight: 600;
  width: 175px;
  text-align: center;
  margin-top: -52px;
  transition: opacity 0.5s;
  font-size: 16px;
  line-height: 21px;
}
.loading-failed.active {
  opacity: 1;
}
</style>
<div id="loading-app">
  <div class="loading-main">
    <svg class="loading-animation" width="80px" height="68px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 36" shape-rendering="geometricPrecision">
      <style>
        #logo-s-path18 { animation: logo-s-path18_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path18_c_o {
          0% { opacity: 0 }
          65% { opacity: 0 }
          70% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path19 { animation: logo-s-path19_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path19_c_o {
          0% { opacity: 0 }
          60% { opacity: 0 }
          65% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path20 { animation: logo-s-path20_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path20_c_o {
          0% { opacity: 0 }
          75% { opacity: 0 }
          80% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path21 { animation: logo-s-path21_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path21_c_o {
          0% { opacity: 0 }
          80% { opacity: 0 }
          85% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path22 { animation: logo-s-path22_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path22_c_o {
          0% { opacity: 0 }
          70% { opacity: 0 }
          75% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path23 { animation: logo-s-path23_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path23_c_o {
          0% { opacity: 0 }
          55% { opacity: 0 }
          60% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path24 { animation: logo-s-path24_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path24_c_o {
          0% { opacity: 0 }
          50% { opacity: 0 }
          55% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path25 { animation: logo-s-path25_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path25_c_o {
          0% { opacity: 0 }
          45% { opacity: 0 }
          50% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path26 { animation: logo-s-path26_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path26_c_o {
          0% { opacity: 0 }
          5% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path27 { animation: logo-s-path27_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path27_c_o {
          0% { opacity: 0 }
          5% { opacity: 0 }
          10% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path28 { animation: logo-s-path28_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path28_c_o {
          0% { opacity: 0 }
          10% { opacity: 0 }
          15% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path29 { animation: logo-s-path29_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path29_c_o {
          0% { opacity: 0 }
          20% { opacity: 0 }
          25% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path30 { animation: logo-s-path30_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path30_c_o {
          0% { opacity: 0 }
          40% { opacity: 0 }
          45% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path31 { animation: logo-s-path31_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path31_c_o {
          0% { opacity: 0 }
          25% { opacity: 0 }
          30% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path32 { animation: logo-s-path32_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path32_c_o {
          0% { opacity: 0 }
          30% { opacity: 0 }
          35% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path33 { animation: logo-s-path33_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path33_c_o {
          0% { opacity: 0 }
          35% { opacity: 0 }
          40% { opacity: 1 }
          100% { opacity: 1 }
        }

        #logo-s-path34 { animation: logo-s-path34_c_o 2000ms linear infinite normal forwards }

        @keyframes logo-s-path34_c_o {
          0% { opacity: 0 }
          15% { opacity: 0 }
          20% { opacity: 1 }
          100% { opacity: 1 }
        }
      </style>
      <g id="logo-u-b-w" opacity="0.38">
        <path id="logo-s-path1" d="M27.3375,12.6L36.72,9.72l-5.5575,3.5325-3.825-.6525Z" fill="#7a7a7a" fill-rule="evenodd" />
        <path id="logo-s-path2" d="M33.0525,19.62l-1.89-6.3675L36.72,9.72l-1.665,5.715-2.0025,4.185Z" fill="#979797" fill-rule="evenodd" />
        <path id="logo-s-path3" d="M39.465,7.9875L38.43,9.72l-3.375,5.715L36.72,9.72l2.745-1.7325Z" fill="#7a7a7a" fill-rule="evenodd" />
        <path id="logo-s-path4" d="M39.8025,9.1125l-2.61,2.6775L38.43,9.72l1.3725-.6075Z" fill="#8e8e8e" fill-rule="evenodd" />
        <path id="logo-s-path5" d="M27.9,10.8225l7.6725-.765L30.24,11.7l-2.34-.8775Z" fill="#8e8e8e" fill-rule="evenodd" />
        <path id="logo-s-path6" d="M28.1925,15.165l2.97-1.9125l1.89,6.3675-.99,2.025-3.87-6.48Z" fill="#7a7a7a" fill-rule="evenodd" />
        <path id="logo-s-path7" d="M23.76,22.725L22.3425,5.4l9.72,16.245-8.3025,1.08Z" fill="#d5d5d5" fill-rule="evenodd" />
        <path id="logo-s-path8" d="M19.7325,27.1575L23.76,22.725l8.3025-1.08-12.33,5.5125Z" fill="#8e8e8e" fill-rule="evenodd" />
        <path id="logo-s-path9" d="M0.1575,35.865l19.575-8.7075L23.76,22.725l-6.39-.6525L0.1575,35.865Z" fill="#d9d9d9" fill-rule="evenodd" />
        <path id="logo-s-path10" d="M0.9,28.755l10.0575-1.53l3.1275-2.52-1.53-.675L0.9,28.755Z" fill="#b9b9b9" fill-rule="evenodd" />
        <path id="logo-s-path11" d="M4.5225,20.5425L14.085,24.705l3.285-2.6325-12.8475-1.53Z" fill="#e5e5e5" fill-rule="evenodd" />
        <path id="logo-s-path12" d="M21.6225,11.6775l-1.215.2025L17.37,22.0725l3.285-2.07.9675-8.325Z" fill="#898989" fill-rule="evenodd" />
        <path id="logo-s-path13" d="M23.4,18.2475l-2.745,1.755L22.3425,5.4L23.4,18.2475Z" fill="#9e9e9e" fill-rule="evenodd" />
        <path id="logo-s-path14" d="M13.0275,13.05l8.595-1.3725L22.005,8.28l-8.9775,4.77Z" fill="#4d4d4d" fill-rule="evenodd" />
        <path id="logo-s-path15" d="M12.105,5.085l7.47,4.5l2.43-1.305.0675-.4725L12.105,5.085Z" fill="#7b7b7b" fill-rule="evenodd" />
        <path id="logo-s-path16" d="M13.5675,0.18l6.795,7.155l1.71.4725.27-2.4075-8.775-5.22Z" fill="#898989" fill-rule="evenodd" />
        <path id="logo-s-path17" d="M17.37,22.0725l6.03-3.825.36,4.4775-6.39-.6525Z" fill="#b7b7b7" fill-rule="evenodd" />
      </g>
      <g id="logo-u-color">
        <path id="logo-s-path18" d="M27.3375,12.6L36.72,9.72l-5.5575,3.5325-3.825-.6525Z" opacity="0" fill="#ca2317" fill-rule="evenodd" />
        <path id="logo-s-path19" d="M33.0525,19.62l-1.89-6.3675L36.72,9.72l-1.665,5.715-2.0025,4.185Z" opacity="0" fill="#e84f83" fill-rule="evenodd" />
        <path id="logo-s-path20" d="M39.465,7.9875L38.43,9.72l-3.375,5.715L36.72,9.72l2.745-1.7325Z" opacity="0" fill="#ca2317" fill-rule="evenodd" />
        <path id="logo-s-path21" d="M39.8025,9.1125l-2.61,2.6775L38.43,9.72l1.3725-.6075Z" opacity="0" fill="#e54011" fill-rule="evenodd" />
        <path id="logo-s-path22" d="M27.9,10.8225l7.6725-.765L30.24,11.7l-2.34-.8775Z" opacity="0" fill="#e54011" fill-rule="evenodd" />
        <path id="logo-s-path23" d="M28.1925,15.165l2.97-1.9125l1.89,6.3675-.99,2.025-3.87-6.48Z" opacity="0" fill="#ca2317" fill-rule="evenodd" />
        <path id="logo-s-path24" d="M23.76,22.725L22.3425,5.4l9.72,16.245-8.3025,1.08Z" opacity="0" fill="#b7dff2" fill-rule="evenodd" />
        <path id="logo-s-path25" d="M19.7325,27.1575L23.76,22.725l8.3025-1.08-12.33,5.5125Z" opacity="0" fill="#e54011" fill-rule="evenodd" />
        <path id="logo-s-path26" d="M0.1575,35.865l19.575-8.7075L23.76,22.725l-6.39-.6525L0.1575,35.865Z" opacity="0" fill="#ffce33" fill-rule="evenodd" />
        <path id="logo-s-path27" d="M0.9,28.755l10.0575-1.53l3.1275-2.52-1.53-.675L0.9,28.755Z" opacity="0" fill="#d6b12d" fill-rule="evenodd" />
        <path id="logo-s-path28" d="M4.5225,20.5425L14.085,24.705l3.285-2.6325-12.8475-1.53Z" opacity="0" fill="#ffde85" fill-rule="evenodd" />
        <path id="logo-s-path29" d="M21.6225,11.6775l-1.215.2025L17.37,22.0725l3.285-2.07.9675-8.325Z" opacity="0" fill="#009ec6" fill-rule="evenodd" />
        <path id="logo-s-path30" d="M23.4,18.2475l-2.745,1.755L22.3425,5.4L23.4,18.2475Z" opacity="0" fill="#5eafce" fill-rule="evenodd" />
        <path id="logo-s-path31" d="M13.0275,13.05l8.595-1.3725L22.005,8.28l-8.9775,4.77Z" opacity="0" fill="#045972" fill-rule="evenodd" />
        <path id="logo-s-path32" d="M12.105,5.085l7.47,4.5l2.43-1.305.0675-.4725L12.105,5.085Z" opacity="0" fill="#5a8591" fill-rule="evenodd" />
        <path id="logo-s-path33" d="M13.5675,0.18l6.795,7.155l1.71.4725.27-2.4075-8.775-5.22Z" opacity="0" fill="#009ec6" fill-rule="evenodd" />
        <path id="logo-s-path34" d="M17.37,22.0725l6.03-3.825.36,4.4775-6.39-.6525Z" opacity="0" fill="#f39804" fill-rule="evenodd" />
      </g>
    </svg>
    <div class="loading-sr-text">
      <%= Translation.translate(local_assigns[:locale], 'Loading…') %>
    </div>
    <div class="loading-failed" aria-hidden="true">
      <%= Translation.translate(local_assigns[:locale], 'Loading failed, please try again later.') %>
    </div>
  </div>
</div>