How to customize the spin loading bar

On this page

The loading bar shows over a spin while it is loading. You can change the design by adding some CSS to your page.

The standard Sirv Spin loading message looks like this:

Spin loading message

Change the loading text

To change the "Loading..." text, either open your profile or the spin file and enter the text you'd like to show. Different text can be shown for desktop and touch-screen devices:

Screenshot of loading message settings

Change the loading design

To change the size, position, color, and design of the hint, add some CSS styles to your HTML page.

Below are all the styles available to be edited. Add padding, margin, font styles and other CSS as you require to create the design you wish:

<style type="text/css">
  .sirv-spin-progress-bar-state, .sirv-spin-fullscreen .sirv-spin-progress-bar-state, .spin-figure .sirv-spin-hint {
  }
  .sirv-spin-loading-box, .spin-figure .sirv-spin-hint {
  }
  .spin-figure .sirv-spin-hint .hint-side, .sirv-spin-hint-side {
  }
  .spin-figure .sirv-spin-hint .hint-text {
  }
  .sirv-spin-loading-box {
  }
  .sirv-spin-progress-text {
  }
  .sirv-spin-fullscreen .sirv-spin-progress-text {
  }
  .sirv-spin-progress-bar, .sirv-spin-progress-bar-state {
  }
  .sirv-spin-fullscreen .sirv-spin-progress-bar, .sirv-spin-fullscreen .sirv-spin-progress-bar-state {
  }
  .sirv-spin-progress-bar {
  }
  .sirv-spin-fullscreen .sirv-spin-progress-bar {
  }
  .sirv-spin-progress-bar-state {
  }
  .sirv-spin-fullscreen .sirv-spin-progress-bar-state {
  }
</style>

Here's a spin with a custom loader:

The message was created with this CSS:

<style type="text/css">
  .sirv-spin-progress-bar-state, .sirv-spin-fullscreen .sirv-spin-progress-bar-state, .spin-figure .sirv-spin-hint {
    background-color: rgba(173, 45, 91, 0.75);
    background-image: none;
  }
  .sirv-spin-loading-box, .spin-figure .sirv-spin-hint {
    font-size: 14px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0.3em 0.1em;
    box-shadow: none;
    border: none;
    border-radius: 0px;
    opacity: 1;
    width: 100%;
    max-width: 100%;
    top: auto;
    bottom: 0 !important;
    left: 0; right: 0;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-font-smoothing: antialiased;
  }
  .spin-figure .sirv-spin-hint .hint-side, .sirv-spin-hint-side {
    display: none;
  }
  .spin-figure .sirv-spin-hint .hint-text {
    width: auto;
    max-width: 96%;
    color: #fff;
    display: inline !important;
  }
  .sirv-spin-loading-box {
    padding: 0;
    background-color: transparent;
  }
  .sirv-spin-progress-text {
    color: rgba(230, 210, 210, 1);
    margin-bottom: 3px;
    text-indent: 3px;
  }
  .sirv-spin-fullscreen .sirv-spin-progress-text {
    font-size: 12px;
    text-indent: 0;
    top: -14px;
  }
  .sirv-spin-progress-bar, .sirv-spin-fullscreen .sirv-spin-progress-bar {
    background-color: rgba(230, 210, 210, .2);
    border: 0;
    border-radius: 0;
    margin: 0 auto;
  }
  .sirv-spin-fullscreen .sirv-spin-progress-bar {
    border: 0px solid rgba(173, 45, 91, 0.1);
  }
  .sirv-spin-progress-bar-state, .sirv-spin-fullscreen .sirv-spin-progress-bar-state {
    border-radius: 0;
    height: 3px;
  }
</style>

Hide the loading bar

To remove the loading message entirely, apply the following CSS to your HTML page.

<style type="text/css">
.sirv-spin-loading-box {
    display: none;
}
</style>

Was this article helpful?

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine