TypeScript

by Ramsey Feng

HTML

<div id="app">
  <button id="start">
    start loading
  </button>

  <button id="stop">
    stop loading
  </button>
  <div class="loading-bar">

  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: center;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

TypeScript

const loading = document.querySelector('.loading-bar');
loading.start = () => {
  loading.classList.add('loader');
};

loading.stop = () => {
  loading.classList.remove('loader');
};



document.querySelector("#start").addEventListener("click", (event) => { 
	loading.start();
}, false);


document.querySelector("#stop").addEventListener("click", (event) => { 
	loading.stop();
}, false);