diff --git a/app/components/loading-slider.js b/app/components/loading-slider.js
index ce7b66b..0300b9d 100644
--- a/app/components/loading-slider.js
+++ b/app/components/loading-slider.js
@@ -2,7 +2,6 @@ import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { run } from '@ember/runloop';
 import { isBlank } from '@ember/utils';
-import $ from 'jquery';
 
 export default Component.extend({
   tagName: 'div',
@@ -63,7 +62,7 @@ export default Component.extend({
   },
 
   manage() {
-    if (isBlank(this.$())) {
+    if (isBlank(this.element)) {
       return;
     }
 
@@ -82,22 +81,25 @@ export default Component.extend({
     this.set('isLoaded', false);
     let self = this,
         elapsedTime = 0,
-        inner = $(`<span class="loading-slider__progress ${this.get('progressBarClass')}">`),
-        outer = this.$(),
+        inner = document.createElement('span'),
+        outer = this.element,
         duration = this.getWithDefault('duration', 300),
         innerWidth = 0,
-        outerWidth = this.$().width(),
+        outerWidth = this.element.clientWidth,
         stepWidth = Math.round(outerWidth / 50),
         color = this.get('color');
+    
+    inner.setAttribute('class', `loading-slider__progress ${this.get('progressBarClass')}`);
+    outer.appendChild(inner);
 
-    outer.append(inner);
     if (color) {
-      inner.css('background-color', color);
+      inner.style.backgroundColor = color;
     }
 
     let interval = window.setInterval(function() {
       elapsedTime = elapsedTime + 10;
-      inner.width(innerWidth = innerWidth + stepWidth);
+      inner.style.width = `${innerWidth}px`;
+      innerWidth = innerWidth + stepWidth;
 
       // slow the animation if we used more than 75% the estimated duration
       // or 66% of the animation width
@@ -109,8 +111,8 @@ export default Component.extend({
       }
 
       if (innerWidth > outerWidth) {
-        run.later(function() {
-          outer.empty();
+        run.later(this, function() {
+          self._removeNodes(outer);
           window.clearInterval(interval);
         }, 50);
       }
@@ -129,7 +131,7 @@ export default Component.extend({
 
   expandingAnimate() {
     let self = this,
-        outer = this.$(),
+        outer = this.element,
         speed = this.getWithDefault('speed', 1000),
         colorQueue = this.get('color');
 
@@ -142,7 +144,7 @@ export default Component.extend({
         colorQueue.push(color);
         self.expandItem.call(self, color);
         if ( ! self.get('isLoading')) {
-          outer.empty();
+          self._removeNodes(outer);
         } else {
           window.setTimeout(updateFn, speed);
         }
@@ -153,51 +155,57 @@ export default Component.extend({
   },
 
   expandItem(color, cleanUp) {
-    let inner = $('<span>').css({'background-color': color}),
-        outer = this.$(),
+    let inner = document.createElement('span'),
+        outer = this.element,
         innerWidth = 0,
-        outerWidth = outer.width(),
+        outerWidth = outer.clientWidth,
         stepWidth = Math.round(outerWidth / 50);
     let ua = window.navigator.userAgent;
     let ie10 = ua.indexOf("MSIE "),
         ie11 = ua.indexOf('Trident/'),
         ieEdge = ua.indexOf('Edge/');
+    let self = this;
 
-    outer.append(inner);
+    inner.style.backgroundColor = color;
+    outer.appendChild(inner);
 
     let interval = window.setInterval(function() {
       let step = (innerWidth = innerWidth + stepWidth);
       if (innerWidth > outerWidth) {
         window.clearInterval(interval);
         if (cleanUp) {
-          outer.empty();
+          self._removeNodes(outer);
         }
       }
       if (ie10 > 0 || ie11 > 0 || ieEdge > 0) {
-        inner.css({
-          'margin': '0 auto',
-          'width': step
-        });
+        inner.style.margin = '0 auto';
+        inner.style.width = `${step}px`;
       } else {
-        inner.css({
-          'margin-left': '-' + step / 2 + 'px',
-          'width': step
-        });
+        inner.style.marginLeft = `-${step / 2}px`;
+        inner.style.width = `${step}px`;
       }
     }, 10);
   },
 
   didInsertElement() {
-    this.$().html('<span>');
-
-    var color = this.get('color');
+    let innerSpan = document.createElement('span');
+    
+    let color = this.get('color');
     if (color) {
-      this.$('span').css('background-color', color);
+      innerSpan.style.backgroundColor = color;
     }
 
+    this.element.appendChild(innerSpan);
+
     if (this.get('runManageInitially')) {
       this._startLoading();
     }
+  },
+
+  _removeNodes(element) {
+    while (element.lastChild) {
+      element.removeChild(element.lastChild);
+    }
   }
 });
 
diff --git a/tests/integration/main-test.js b/tests/integration/main-test.js
index ec7b623..37ff352 100644
--- a/tests/integration/main-test.js
+++ b/tests/integration/main-test.js
@@ -9,9 +9,9 @@ module('Acceptance | Main', function(hooks) {
   test('visiting /75', async function(assert) {
     await visit('/75');
 
-    assert.equal(await findAll('.loading-slider').length, 1, "The component's element exists");
-    assert.equal(await findAll('.loading-slider span').length, 1, 'The component has inserted one span');
-    assert.equal(await find('.loading-slider span').clientWidth, 0, 'The stripe has finished animating and is width 0');
+    assert.equal(findAll('.loading-slider').length, 1, "The component's element exists");
+    assert.equal(findAll('.loading-slider span').length, 1, 'The component has inserted one span');
+    assert.equal(find('.loading-slider span').clientWidth, 0, 'The stripe has finished animating and is width 0');
   });
 
   test('testing animation', async function(assert) {
@@ -22,12 +22,12 @@ module('Acceptance | Main', function(hooks) {
     // use the jQuery click rather than the promise observing click
     await findAll('button')[1].click();
 
-    later(async () => {
-      assert.equal(await findAll('.loading-slider span')[1].clientWidth > 0, true, 'The slider has animated');
-    }, 500);
+    later(() => {
+      assert.equal(findAll('.loading-slider span')[1].clientWidth > 0, true, 'The slider has animated');
+    }, 250);
 
-    later(async () => {
-      assert.equal(await findAll('.loading-slider span').length === 0, true, 'The slider has reset');
+    later(() => {
+      assert.equal(findAll('.loading-slider span').length === 0, true, 'The slider has reset');
     }, 1500);
   });
 
@@ -37,8 +37,8 @@ module('Acceptance | Main', function(hooks) {
     // use the jQuery click rather than the promise observing click
     await findAll('button')[2].click();
 
-    later(async () => {
-      assert.equal(await findAll('.loading-slider span')[1].clientWidth > 0, true, 'The slider has animated');
+    later(() => {
+      assert.equal(findAll('.loading-slider span')[1].clientWidth > 0, true, 'The slider has animated');
     }, 1000);
 
     later(() => {