/* Empty. Add your own CSS if you like */

body {
  height: 100%;
}

/* ion-content makes an inner wrapper */
ion-content, ion-content > * {
  height: 100%
}

tocker {
  display: block;
  position: relative;
  height: 50%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #eee;
  transition: background-color 2s;
}

tocker.dead {
  background-color: #f00;
}

tocker:first-child {
  transform: rotate(180deg);
}

tocker .tocker-text {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  color: #aaa;
  transition: color 0.5s;
}

tocker.active .tocker-text {
  color: #444;
}

tocker .tocker-progress {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 5px;
  width: 100%;
  background-color: #ccc;
  transition: background-color 0.5s;
  transition: width .3s;
}

tocker.active .tocker-progress {
  background-color: #f00;
}

/* Empty. Add your own CSS if you like */

body {
  height: 100%;
}

/* ion-content makes an inner wrapper */
ion-content, ion-content > * {
  height: 100%
}

tocker {
  display: block;
  position: relative;
  height: 50%;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  border-top: 1px solid #eee;
  transition: background-color 2s;
}

tocker.dead {
  background-color: #af111c;
}

tocker:first-child {
  transform: rotate(180deg);
}

tocker .tocker-text {
  position: relative;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  font-size: 5em;
  color: #aaa;
  transition: color 0.5s;
}

tocker.active .tocker-text {
  color: #444;
}

tocker .tocker-progress {
  display: block;
  position: absolute;
  bottom: 0px;
  height: 8px;
  width: 100%;
  background-color: #ccc;
  transition: background-color 0.5s;
  transition: width .3s;
}

tocker.active .tocker-progress {
  background-color: #af111c;
}

Make progress bar more prominent
Make progress bar more prominent
