CSS: Animated Loader

The code used for loader.css is below:

.loader{
    margin: auto;
    border: 16px solid #bdc3c7;
    width: 120px;
    height: 120px;
    border-top-color: #1abc9c;
    border-bottom-color: #3498db;
    border-radius: 50%;
    animation-name: spin;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.loader:hover{
    animation-name: spin-other-way;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes spin{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
    
}

@keyframes spin-other-way{
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0deg);
    }
    
}

The code used for index.php is below:

<!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">
    <link rel="stylesheet" href="../styles.css">
    <link rel="stylesheet" href="loader.css">
    <title>CSS: Animated Loader</title>
</head>
<body>
    <h1 class="lesson-h1">CSS: Animated Loader</h1>

    <div class="container">
        <h1>The Page is Loading</h1>
        <div class="loader"></div>
    </div>
    
    <?php
        include('../show_code.php');
        show_code('loader.css');
        show_code('index.php');
    ?>
</body>
</html>