Helm Loading Widget

by Simon Gamester

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="main-spinner">
  <div class="lds-css ng-scope">

    <div class="tips">
      <div class="slide-wrapper">

        <div class="slide">
          <div class="slide-number">
            <h2>Give up smoking</h2>
            <p>If you're a smoker, quit. It's the single best thing you can do for your heart health.</p>
            <p>Smoking is one of the main causes of coronary heart disease. A year after giving up, your risk of a heart attack falls to about half that of a smoker.</p>
            <p>You're more likely to stop smoking for good if you use NHS stop smoking services. Visit the Smokefree website or ask your GP for help with quitting.</p>
          </div>
        </div>

        <div class="slide">
          <div class="slide-number">
            <h2>Get active</h2>
            <p>Getting – and staying – active can reduce your risk of developing heart disease. It can also be a great mood booster and stress buster.</p>
            <p>Do 150 minutes of moderate-intensity aerobic activity every week. One way to achieve this target is by doing 30 minutes of activity on 5 days a week. Fit it in where you can, such as by cycling to work.</p>
          </div>
        </div>

        <div class="slide">
          <div class="slide-number">
            <h2>Manage your weight</h2>
            <p>Being overweight can increase your risk of heart disease. Stick to a healthy, balanced diet low in fat and sugar, with plenty of fruit and vegetables,...

SCSS

body {

  .footer, .wrapper {
    transition: opacity 1s ease, visibility 1s ease;
    opacity: 1;
    visibility: visible;
  }
  
  .main-spinner {
    display: block;
    position: fixed;
    top: 0; bottom: 0;
    left: 0; right: 0;
    z-index: 9999;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease, visibility 1s ease, background 1s ease;
  }
  
	.tips {
		opacity: 0;
		visibility: hidden;
	}
    
  &.loading {
    .footer, .wrapper {
      opacity: 0;
      visibility: hidden;
    }
    .main-spinner {
      opacity: 1;
      visibility: visible;
    }
    
    &.with-tips .tips {
	    opacity: 1;
      visibility: visible;
    }
  }
}

@keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes lds-dual-ring {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes lds-dual-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@-webkit-keyframes lds-dual-ring_reverse {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}

.lds-css {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  display: block !important;
  margin-top: -100px;
  margin-left: -100px;
}

// New
body.loading.with-tips .lds-css {
	top: 20%;
}

.lds-dual-ring {
  position: relative;
}

.lds-dual-ring div {
  position: absolute;
  width: 120px;
  height: 120px;
  top: 40px;
  left: 40px;
  border-radius: 50%;
  border: 10px solid #000;
  border-color: #3596f4 transparent #3596f4 transparent;
  -webkit-animation: lds-dual-ring 1s linear infinite;
 ...