markdown 将旋转器与覆盖层结合在一起

Posted 2021-05-05

### CSS
* Create 2 `<div>`'s with and id of `spinner` and `spinner-background`
* Insert these `div`'s as **sibings** to the element you wish to cover with the overlay
* CSS:

```css
#spinner-background {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0,0,0,.5);
	height: 100%;
	width: 100%;
}

#spinner {
	display: none;
   position: absolute;
   left: 50%;
   top: 50%;
   height:60px;
   width:60px;
   margin:0px auto;
   -webkit-animation: rotation .6s infinite linear;
   -moz-animation: rotation .6s infinite linear;
   -o-animation: rotation .6s infinite linear;
   animation: rotation .6s infinite linear;
   border-left:6px solid rgba(0,174,239,.15);
   border-right:6px solid rgba(0,174,239,.15);
   border-bottom:6px solid rgba(0,174,239,.15);
   border-top:6px solid rgba(0,174,239,.8);
   border-radius:100%;
}

@-webkit-keyframes rotation {
   from {-webkit-transform: rotate(0deg);}
   to {-webkit-transform: rotate(359deg);}
}
@-moz-keyframes rotation {
   from {-moz-transform: rotate(0deg);}
   to {-moz-transform: rotate(359deg);}
}
@-o-keyframes rotation {
   from {-o-transform: rotate(0deg);}
   to {-o-transform: rotate(359deg);}
}
@keyframes rotation {
   from {transform: rotate(0deg);}
   to {transform: rotate(359deg);}
}
```

---

### JS
* To implement js to show the spinner and hide the spinner upon success:
* Example using a `.js.erb` file

```js
$("#spinner, #spinner-background").show()
window.setTimeout(function() {
  // do your code
	$("#spinner, #spinner-background").hide()
}, 500)

// This code WAITS 500 milliseconds BEFORE executing the hide and function within the `setTimeout` function
```
* So until the results are added to the DOM, the loader won't hide

#### Coffeescript
* If rails form is submitted through ajax, **is better bind the to the form the `ajax:success`
`ajax:error`, `ajax:before`** callbacks so that it is more accurate from the moment the request is sent
the osder is started and won't hiede until the ajax request is finlized:

```ruby

```