Animated Stylish Spinner in CSS

Custom spinners are a fun way to breathe life into your web pages. This brilliant collection of custom CSS spinners comes from animation styles from rotating circles to animated bars and even a custom spinners. Have noticed that there're a large number of Javascript (or jQuery) based loading spinners for dynamic content out there, however, the CSS technology can do the same thing with better performance and less coding.

In this concept, I would like to share with you a hand-picked loading spinners animated with pure CSS for your next project, for inspiration, or for your particular users who have Javascript DISABLED.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Spinner in CSS</title>
  <link rel="stylesheet" href="css/style.css">
</head>
    <h3>Stylish Spinner in CSS</h3>
    <div class="loader"></div>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  
}
body{
  width: 100vw;
  height: 100vh;
  font-family: 'Poppins', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color:#2c3e50;
}
h3{
  margin-bottom:50px;
  font-weight: normal;
  font-style: italic;
  font-size: 25px;
  color:white;
}
.loader{
  height: 150px;
  width: 150px;
  border-radius: 50%;
  border: 6px solid;
  border-color:  white transparent white transparent;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to{
    transform: rotate(360deg);
  }
  
}