Add loading gif to content panels

lenrsmith commented

2021-04-07 13:16:55 +00:00

Contributor

[8:15 AM] Tim Maggio
Can you put a "loading" gif or something in that area to the right? Something indicating "OK OK, hold your horses"

[8:15 AM] Tim Maggio Can you put a "loading" gif or something in that area to the right? Something indicating "OK OK, hold your horses"

ezra commented

2021-04-07 16:42:52 +00:00

Member

That shouldn't be too hard. Looks like pure CSS loaders are a thing now, and they don't require an extra network request! We can probably use one of these: https://codepen.io/mrsahar/pen/pMxyrE I'd suggest Circle2.

That shouldn't be too hard. Looks like pure CSS loaders are a thing now, and they don't require an extra network request! We can probably use one of these: https://codepen.io/mrsahar/pen/pMxyrE I'd suggest `Circle2`.

ezra commented

2021-04-07 16:45:05 +00:00

Member

All we need is:

HTML

<div id="circle2"></div>

CSS

/**===== circle2 =====*/
#circle2 {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 50px;
  width: 50px;
  margin: -25px 0 0 -25px;
  border: 4px rgba(0, 0, 0, 0.25) solid;
  border-top: 4px black solid;
  border-radius: 50%;
  -webkit-animation: spin2 1s infinite linear;
          animation: spin2 1s infinite linear;
}

@-webkit-keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
@keyframes spin2 {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
            transform: rotate(359deg);
  }
}
/** END of circle2 */
/*-----------------------------------------------------------------------*/

All we need is: HTML ``` <div id="circle2"></div> ``` CSS ``` /**===== circle2 =====*/ #circle2 { display: block; position: absolute; top: 50%; left: 50%; height: 50px; width: 50px; margin: -25px 0 0 -25px; border: 4px rgba(0, 0, 0, 0.25) solid; border-top: 4px black solid; border-radius: 50%; -webkit-animation: spin2 1s infinite linear; animation: spin2 1s infinite linear; } @-webkit-keyframes spin2 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } @keyframes spin2 { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(359deg); transform: rotate(359deg); -webkit-transform: rotate(359deg); transform: rotate(359deg); } } /** END of circle2 */ /*-----------------------------------------------------------------------*/ ```

ezra commented

2021-04-07 18:34:56 +00:00

Member

I'm honestly not sure how to implement it though...

lenrsmith self-assigned this 2021-05-02 15:08:59 +00:00

ezra commented

2021-05-13 21:15:39 +00:00

Member

Actually, Bootstrap has spinners!! https://getbootstrap.com/docs/4.6/components/spinners/

Easy enough to add to the DOM, but I think we'll need a bit of JS to actually implement them, and then hide them once the content has loaded.

Actually, Bootstrap has spinners!! https://getbootstrap.com/docs/4.6/components/spinners/ Easy enough to add to the DOM, but I think we'll need a bit of JS to actually implement them, and then hide them once the content has loaded.

Add loading gif to content panels #5