Pure CSS Spinning Squares Loader

HTML Snippet

<div class="loader">
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
    <div class="loader-box"></div>
</div>

CSS Snippet


.loader {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            width: 220px;
            height: 220px;
            margin: auto;
            transform-origin: center;
            transform: scale(0.5) rotate(45deg);
            animation: loader-animation 2s linear infinite;
        }
        .loader-box {
            height: 50px;
            width: 50px;
            display: inline-block;
            margin: 5px;
            transform: rotate(45deg);
            margin: 10px;
            transition: all 2s ease;
            animation: loader-box-animation .5s linear infinite;
        }
        .loader-box:nth-child(1) {
            background-color: #2196F3;
        }
        .loader-box:nth-child(2) {
            background-color: #00BCD4;
        }
        .loader-box:nth-child(3) {
            background-color: #9C27B0;
        }
        .loader-box:nth-child(4) {
            background-color: #E91E63;
        }
        .loader-box:nth-child(5) {
            background-color: transparent;
        }
        .loader-box:nth-child(6) {
            background-color: #FF5722;
        }
        .loader-box:nth-child(7) {
            background-color: #FFC107;
        }
        .loader-box:nth-child(8) {
            background-color: #8BC34A;
        }
        .loader-box:nth-child(9) {
            background-color: #2196F3;
        }

        @keyframes loader-animation {
            0%{transform: rotate(0) scale(0.3);}
            50%,70%{ transform: rotate(180deg) scale(0.6);}

            100%{transform: rotate(360deg) scale(0.3);}
        }
        @keyframes loader-box-animation {
            0%{ transform: rotate(0) scale(0.5);}
            50%{transform: rotate(-180deg) scale(0.6);}

            100%{ transform: rotate(-360deg) scale(0.5);}
        }

Leave a Reply

Your email address will not be published. Required fields are marked *

two × one =