PButcher/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel='stylesheet' type='text/css' href='css/style.css'>
  </head>
  <body>
    <div class="square-loader">
      <div class="triangle triangle-red"></div>
      <div class="triangle triangle-green"></div>
      <div class="triangle triangle-blue"></div>
      <div class="triangle triangle-yellow"></div>
    </div>
  </body>
</html>

## style.css
.square-loader {
  position: relative;
  width: 100px;
  height: 100px;
}

.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-top: 0;
  border-top: 50px solid transparent;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  animation: triangle-anim-1 2s infinite;
}

.triangle-red {
  left: 0;
  transform: rotateZ(90deg);
  border-bottom: 50px solid red;
}

.triangle-green {
  top: 0;
  transform: rotateZ(180deg);
  border-bottom: 50px solid lime;
  animation-delay: .25s;
}

.triangle-blue {
  bottom: 0;
  transform: rotateZ(0deg);
  border-bottom: 50px solid blue;
  animation-delay: .75s;
}

.triangle-yellow {
  right: 0;
  transform: rotateZ(-90deg);
  border-bottom: 50px solid yellow;
  animation-delay: .50s;
}

@keyframes triangle-anim-1 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel='stylesheet' type='text/css' href='css/style.css'>
	</head>
	<body>
	<div class="square-loader">
	<div class="triangle triangle-red"></div>
	<div class="triangle triangle-green"></div>
	<div class="triangle triangle-blue"></div>
	<div class="triangle triangle-yellow"></div>
	</div>
	</body>
	</html>
	.square-loader {
	position: relative;
	width: 100px;
	height: 100px;
	}

	.triangle {
	position: absolute;
	width: 0;
	height: 0;
	border-top: 0;
	border-top: 50px solid transparent;
	border-right: 50px solid transparent;
	border-left: 50px solid transparent;
	animation: triangle-anim-1 2s infinite;
	}

	.triangle-red {
	left: 0;
	transform: rotateZ(90deg);
	border-bottom: 50px solid red;
	}

	.triangle-green {
	top: 0;
	transform: rotateZ(180deg);
	border-bottom: 50px solid lime;
	animation-delay: .25s;
	}

	.triangle-blue {
	bottom: 0;
	transform: rotateZ(0deg);
	border-bottom: 50px solid blue;
	animation-delay: .75s;
	}

	.triangle-yellow {
	right: 0;
	transform: rotateZ(-90deg);
	border-bottom: 50px solid yellow;
	animation-delay: .50s;
	}

	@keyframes triangle-anim-1 {
	0% {
	opacity: 1;
	}
	50% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}