Font Awesome Spinner Animation

​x
 
<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
</head>
<body>
    <h2 style="text-align: center;">Font Awesome Spinner Animation</h2>
    <div class="spinner">
        <i class="fa fa-spinner fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-spinner fa-pulse"></i>
        <i class="fa fa-hourglass-start fa-spin"></i>
        <i class="fa fa-heartbeat fa-spin"></i>
        <i class="fa fa-refresh fa-spin"></i>
        <i class="fa fa-circle-o-notch fa-spin"></i>
        <i class="fa fa-cog fa-spin"></i>
        <i class="fa fa-star fa-spin"></i>
    </div>
</body>
​
<style>
    .spinner {
        font-size: 3em;
        display: flex;
        justify-content: center;
        align-items: center;
    }
​
    .spinner i {
        margin: 10px;
    }
</style>
​
</html>