nyk0r · December 19, 2018 23:46
diff --git a/square-spinners.html b/square-spinners.html
 <!DOCTYPE html>
 <html>
 <head>
    <style>
        .spinner {
            background-color: transparent;
            position: relative;
        }

        .spinner__square-1, 
        .spinner__square-2, 
        .spinner__square-3 {
            border-radius: 2px;
            position: absolute;
            height: 24px;
            width: 24px;
        }

        .spinner__square-1 {
            background-color: #f3dcb2;
            animation: spinner__square-1-move 2s infinite linear;
        }
        @keyframes spinner__square-1-move {
            0% {
                left: 0;
                top: 0;
            }

            25% {
                left: 30px;
                top: 0;
            }

            50% {
                left: 30px;
                top: 30px;
            }

            75% {
                left: 0;
                top: 30px;
            }

            100% {
                left: 0;
                top: 0;
            }
        }


        .spinner__square-2 {
            background-color: #1154ad;
            animation: spinner__square-2-move 2s infinite linear;
        }
        @keyframes spinner__square-2-move {
            0% {
                left: 30px;
                top: 0;
            }

            25% {
                left: 30px;
                top: 30px;
            }

            50% {
                left: 0;
                top: 30px;
            }

            75% {
                left: 0;
                top: 0;
            }

            100% {
                left: 30px;
                top: 0;
            }
        }

        .spinner__square-3 {
            background-color: #c7cdd5;
            animation: spinner__square-3-move 2s infinite linear;
        }
        @keyframes spinner__square-3-move {
            0% {
                left: 30px;
                top: 30px;
            }

            25% {
                left: 0;
                top: 30px;
            }

            50% {
                left: 0;
                top: 0;
            }

            75% {
                left: 30px;
                top: 0;
            }

            100% {
                left: 30px;
                top: 30px;
            }
        }

    </style>
 </head>
 <body>
    <div class="spinner">
        <div class="spinner__square-1"></div>
        <div class="spinner__square-2"></div>
        <div class="spinner__square-3"></div>
    </div>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.spinner {
	background-color: transparent;
	position: relative;
	}

	.spinner__square-1,
	.spinner__square-2,
	.spinner__square-3 {
	border-radius: 2px;
	position: absolute;
	height: 24px;
	width: 24px;
	}

	.spinner__square-1 {
	background-color: #f3dcb2;
	animation: spinner__square-1-move 2s infinite linear;
	}
	@keyframes spinner__square-1-move {
	0% {
	left: 0;
	top: 0;
	}

	25% {
	left: 30px;
	top: 0;
	}

	50% {
	left: 30px;
	top: 30px;
	}

	75% {
	left: 0;
	top: 30px;
	}

	100% {
	left: 0;
	top: 0;
	}
	}


	.spinner__square-2 {
	background-color: #1154ad;
	animation: spinner__square-2-move 2s infinite linear;
	}
	@keyframes spinner__square-2-move {
	0% {
	left: 30px;
	top: 0;
	}

	25% {
	left: 30px;
	top: 30px;
	}

	50% {
	left: 0;
	top: 30px;
	}

	75% {
	left: 0;
	top: 0;
	}

	100% {
	left: 30px;
	top: 0;
	}
	}

	.spinner__square-3 {
	background-color: #c7cdd5;
	animation: spinner__square-3-move 2s infinite linear;
	}
	@keyframes spinner__square-3-move {
	0% {
	left: 30px;
	top: 30px;
	}

	25% {
	left: 0;
	top: 30px;
	}

	50% {
	left: 0;
	top: 0;
	}

	75% {
	left: 30px;
	top: 0;
	}

	100% {
	left: 30px;
	top: 30px;
	}
	}

	</style>
	</head>
	<body>
	<div class="spinner">
	<div class="spinner__square-1"></div>
	<div class="spinner__square-2"></div>
	<div class="spinner__square-3"></div>
	</div>
	</body>
	</html>