Example spinner

In this example below you will see how to do a Example spinner with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ColdToast, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ColdToast ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Example spinner</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div class="spinner">
  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
  <span class="sr-only">Loading...</span>
</div>

<button>Make it come back</button>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ColdToast/example-spinner-PORQvd */
html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  position: absolute;
  top: 0;
}

.spinner.hide {
  display: none;
}


/*Downloaded from https://www.codeseek.co/ColdToast/example-spinner-PORQvd */
function hideTheSpinnerAfter(duration) {
  setTimeout(() => {
    document.querySelector('.spinner')
      .classList.add('hide')
  }, duration)  
}

// Not important to the demo
document.querySelector('button').addEventListener('click', () => {
  document.querySelector('.spinner')
    .classList.remove('hide')
  
  hideTheSpinnerAfter(1000)
})

// Initial 2s
hideTheSpinnerAfter(2000)

Comments