jamesknelson/BlackTriangle.js

## BlackTriangle.js
export default class BlackTriangle {
  constructor(selector) {
    this.angle = 0;
    this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
  }

  rotate(amount) {
    this.angle = (this.angle + amount) % 360;
  }

  render() {
    this.innerEl.style.transform = `rotate(${this.angle}deg)`;
  }
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack Black Triangle</title>
  </head>
  <body>
    <style>
      html, body {
        height: 100%;
        min-height: 100%;
        margin: 0;
      }

      .BlackTriangle {
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        width: 100%;
        overflow: hidden;
      }

      .BlackTriangle-inner {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 277.2px;
        height: 277.2px;
        margin-top: -138.6px;
        margin-left: -138.6px;
        border-radius: 100%;
      }

      .BlackTriangle-inner:before {
        position:absolute;
        z-index: 1;
        top: 50%;
        left: 50%;
        margin-top: -136px;
        margin-left: -120px;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 120px 207.8px 120px;
        border-color: transparent transparent #000 transparent;
      }
    </style>
    <div id="triangle" class="BlackTriangle">
      <div class="BlackTriangle-inner"></div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

## main.js
'use strict';

import BlackTriangle from "./BlackTriangle";

const triangle = new BlackTriangle('#triangle');

window.setInterval(
  () => {
    triangle.rotate(1);
    triangle.render();
  },
  20
);
	export default class BlackTriangle {
	constructor(selector) {
	this.angle = 0;
	this.innerEl = document.querySelector(selector).querySelector('.BlackTriangle-inner');
	}

	rotate(amount) {
	this.angle = (this.angle + amount) % 360;
	}

	render() {
	this.innerEl.style.transform = `rotate(${this.angle}deg)`;
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Webpack Black Triangle</title>
	</head>
	<body>
	<style>
	html, body {
	height: 100%;
	min-height: 100%;
	margin: 0;
	}

	.BlackTriangle {
	position: absolute;
	height: 100%;
	left: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	}

	.BlackTriangle-inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 277.2px;
	height: 277.2px;
	margin-top: -138.6px;
	margin-left: -138.6px;
	border-radius: 100%;
	}

	.BlackTriangle-inner:before {
	position:absolute;
	z-index: 1;
	top: 50%;
	left: 50%;
	margin-top: -136px;
	margin-left: -120px;
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 120px 207.8px 120px;
	border-color: transparent transparent #000 transparent;
	}
	</style>
	<div id="triangle" class="BlackTriangle">
	<div class="BlackTriangle-inner"></div>
	</div>
	<script src="main.js"></script>
	</body>
	</html>
	'use strict';

	import BlackTriangle from "./BlackTriangle";

	const triangle = new BlackTriangle('#triangle');

	window.setInterval(
	() => {
	triangle.rotate(1);
	triangle.render();
	},
	20
	);