diff --git a/editor.htm b/editor.htm
index e02b36a..3bf8ddc 100644
--- a/editor.htm
+++ b/editor.htm
@@ -25,12 +25,12 @@
 	crossorigin="anonymous"
 >
 
-<link rel="stylesheet" href="styles/main.css">
+<link rel="stylesheet" href="styles/editor.css">
 
 <script src="scripts/requireConfig.js"></script>
 
 <script
-	data-main="scripts/main"
+	data-main="scripts/editor"
 	src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"
 	integrity="sha256-0SGl1PJNDyJwcV5T+weg2zpEMrh7xvlwO4oXgvZCeZk="
 	crossorigin="anonymous"
@@ -63,7 +63,15 @@
 </head>
 <body>
 
-<noscript>This tool requires Javascript!</noscript>
+<div id="loader">
+<h1>Sequence Diagram Online Editor</h1>
+<p class="loadmsg">Loading&hellip;</p>
+<noscript><p class="noscript">This tool requires Javascript!<p></noscript>
+<nav>
+<a href="." target="_blank">Library</a>
+<a href="https://github.com/davidje13/SequenceDiagram" target="_blank">GitHub</a>
+</nav>
+</div>
 
 </body>
 </html>
diff --git a/scripts/main.js b/scripts/editor.js
similarity index 92%
rename from scripts/main.js
rename to scripts/editor.js
index 1d0a620..de98e52 100644
--- a/scripts/main.js
+++ b/scripts/editor.js
@@ -222,12 +222,26 @@
 				preview: 'begin A\nterminators box',
 			},
 		];
+
+		const loader = document.getElementById('loader');
+		const nav = loader.getElementsByTagName('nav')[0];
+		const linkElements = nav.getElementsByTagName('a');
+		const links = [];
+		for(let i = 0; i < linkElements.length; ++ i) {
+			links.push({
+				label: linkElements[i].innerText,
+				href: linkElements[i].getAttribute('href'),
+			});
+		}
+
 		const ui = new Interface({
 			defaultCode,
 			sequenceDiagram: new SequenceDiagram(),
 			library,
+			links,
 			localStorage: 'src',
 		});
+		loader.parentNode.removeChild(loader);
 		ui.build(document.body);
 	});
 })());
diff --git a/scripts/interface/Interface.js b/scripts/interface/Interface.js
index c819244..fab721b 100644
--- a/scripts/interface/Interface.js
+++ b/scripts/interface/Interface.js
@@ -46,12 +46,14 @@ define([
 			sequenceDiagram,
 			defaultCode = '',
 			localStorage = '',
-			library = null,
+			library = [],
+			links = [],
 		}) {
 			this.diagram = sequenceDiagram;
 			this.defaultCode = defaultCode;
 			this.localStorage = localStorage;
 			this.library = library;
+			this.links = links;
 			this.minScale = 1.5;
 
 			this.diagram.registerCodeMirrorMode(CodeMirror);
@@ -70,21 +72,15 @@ define([
 		}
 
 		buildOptionsLinks() {
-			const libLink = makeNode('a', {
-				'href': '.',
-				'target': '_blank',
-			});
-			libLink.appendChild(makeText('Library'));
-
-			const githubLink = makeNode('a', {
-				'href': 'https://github.com/davidje13/SequenceDiagram',
-				'target': '_blank',
-			});
-			githubLink.appendChild(makeText('GitHub'));
-
 			const options = makeNode('div', {'class': 'options links'});
-			options.appendChild(libLink);
-			options.appendChild(githubLink);
+			this.links.forEach((link) => {
+				const linkNode = makeNode('a', {
+					'href': link.href,
+					'target': '_blank',
+				});
+				linkNode.appendChild(makeText(link.label));
+				options.appendChild(linkNode);
+			});
 			return options;
 		}
 
@@ -259,7 +255,7 @@ define([
 			const codePane = makeNode('div', {'class': 'pane-code'});
 			container.appendChild(codePane);
 
-			if(this.library !== null) {
+			if(this.library.length > 0) {
 				const libPane = makeNode('div', {'class': 'pane-library'});
 				const libPaneScroller = makeNode('div', {
 					'class': 'pane-library-scroller',
diff --git a/scripts/tester/jshintRunner.js b/scripts/tester/jshintRunner.js
index 6f5bf41..3331276 100644
--- a/scripts/tester/jshintRunner.js
+++ b/scripts/tester/jshintRunner.js
@@ -6,7 +6,7 @@ define(['jshintConfig', 'specs'], (jshintConfig) => {
 	// Thanks, https://opensoul.org/2011/02/20/jslint-and-jasmine/
 
 	const extraFiles = [
-		'scripts/main.js',
+		'scripts/editor.js',
 		'scripts/requireConfig.js',
 		'scripts/readmeImages.js',
 		'scripts/standalone.js',
diff --git a/styles/main.css b/styles/editor.css
similarity index 89%
rename from styles/main.css
rename to styles/editor.css
index d175f44..b8a2ed0 100644
--- a/styles/main.css
+++ b/styles/editor.css
@@ -1,6 +1,39 @@
 html, body {
 	margin: 0;
 	padding: 0;
+	font: 1em sans-serif;
+}
+
+#loader {
+	margin: 140px 50px;
+	text-align: center;
+}
+
+#loader h1 {
+	font: 2em sans-serif;
+	margin: 0 0 20px;
+}
+
+#loader p {
+	margin: 0;
+	padding: 0.5em;
+	line-height: 1.3;
+}
+
+#loader p.noscript {
+	position: relative;
+	top: -2.3em;
+	background: #FFFFFF;
+}
+
+#loader nav {
+	margin: 80px 0 0;
+	font-size: 0.8em;
+}
+
+#loader nav a {
+	display: inline-block;
+	margin: 0 10px 10px;
 }
 
 .pane-code {
@@ -173,7 +206,6 @@ html, body {
 .options {
 	position: absolute;
 	background: #FFFFFF;
-	font-family: sans-serif;
 	overflow: hidden;
 	user-select: none;
 }
