Loading Spinner using HTML and CSS

Step 1: In HTML file add the following to create a container where the loading spinner needs to be rendered.

<div class="spinner-container">

  <h5> Loading... </h5>

  <div class="loading-spinner"/>    

 </div>

Step 2: In CSS file add the following 

@keyframes spinner {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

.loading-spinner {

  width: 50px;

  height: 50px;

  border: 10px solid #ddd;  /* Light grey */

  border-top: 10px solid #383636; /* Black */

  border-radius: 50%;

  animation: spinner 5s linear infinite;

}

Result: