Skip to content
WithCable

Other Features

Section titled “Navigation Loading State”

In Briz, we provide a loading navigation state with the data-briz-loading attribute, which aims to add loading in navigation when the connection is not very good as feedback to the user so that the user does not think the application hangs or crashes. There are 2 main states here, namely when navigation starts, data-briz-loading will be true. When navigation is complete, the value of data-briz-loading will be done and will be removed from the DOM. You can use CSS according to the data-briz-loading state, or you can copy the following CSS.

style.css
/* Default state (hidden) */
html::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: #c0c;
  z-index: 9999;
  opacity: 0;
  transition: width 0.4s ease-out, opacity 0.2s;
  pointer-events: none;
}


/* State Loading: Slowly progressing to 90% */
html[data-briz-loading="true"]::before {
  opacity: 1;
  width: 90%;
  /* We give you 10 seconds so you don't get stuck if the connection is slow. */
  transition: width 10s cubic-bezier(0.1, 0.05, 0.1, 1);
}


/* State Completed: Jump to 100% */
html[data-briz-loading="done"]::before {
  opacity: 1;
  width: 100%;
  transition: width 0.2s ease-out;
}

You can change the loading color to suit your own theme. After you add this CSS to your website, it will automatically add a top loading bar.

This only works for navigation. For requests using the FORM tag, you can follow the examples provided on this website.