Spinner Animation in CSS

thumbnail

In this tutorial, you will read about spinner animation in CSS.

The CSS is shown below:

body {
  padding: 20px; 
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

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

The full code to create spinner animation:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  padding: 20px; 
}
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: spin;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
</style>
</head>
<body>
 
<h2>Spinner Animation</h2>
<div></div>
 
</body>
</html>

When you open it in the browser, the output will be:

Read another CSS tutorial.

Back To Top