dfkaye/css-loading-indicator.html

## css-loading-indicator.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>accessible loading spinner</title>
    <!-- see http://pauljadam.com/demos/loading-indicator.html -->

    <style nonce="4AEemGb0xJptoIGFP3Nd">

      html {
        font-size: 1em;
        line-height: 1.3;
        font-family: sans-serif;
      }

      .pe-loadingSpinner {
        width: 25px;
        height: 25px;
        position: relative;
      }

      .loading-indicator-wrapper {
        border-radius: 5px;
        margin: auto;
        width: 200px;
        padding: 30px 20px 20px 20px;
        background-color: #252525;
      }

      .loading-indicator {
        color: white;
        margin: auto;
        width: 50%;
        background-color: #252525;
      }

      .pe-loadingSpinner {
        width: 25px;
        height: 25px;
        position: relative;
      }

      .pe-loadingSpinner-container {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .circle {
        width: 4px;
        height: 4px;
        background-color: #19A6A4;
        border-radius: 100%;
        position: absolute;
        animation: bouncedelay 1.6s infinite ease-in-out;
        animation-fill-mode: both;
      }

      .circle:nth-of-type(1) {
        top: 0;
        left: 0;
      }

      .circle:nth-of-type(2) {
        top: 0;
        right: 0;
      }

      .circle:nth-of-type(3) {
        right: 0;
        bottom: 0;
      }

      .circle:nth-of-type(4) {
        left: 0;
        bottom: 0;
      }

      .pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(2) {
        animation-delay: -1.2s;
      }

      .pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(3) {
        animation-delay: -0.8s;
      }

      .pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(4) {
        animation-delay: -0.4s;
      }

      .pe-loadingSpinner-container:nth-of-type(2) {
        transform: rotateZ(45deg);
      }

      .pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(1) {
        animation-delay: -1.4s;
      }

      .pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(2) {
        animation-delay: -1.0s;
      }

      .pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(3) {
        animation-delay: -0.6s;
      }

      .pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(4) {
        animation-delay: -0.2s;
      }

      @keyframes bouncedelay {

        0%,
        25%,
        100% {
          transform: scale(1);
        }

        12.5% {
          transform: scale(1.5);
        }
      }

      .loading-text {
        padding-left: 30px;
        display: block;
        margin: auto;
        width: 50%;
        position: relative;
        top: -20px;
      }
    </style>
  </head>
  <body>
    <div role="alert" aria-label="Loading" class="loading-indicator-liveregion"
      id="liveregion">
      <div class="loading-indicator-wrapper" id="spinner-icon"
        role="progressbar" aria-valuemin="0" aria-valuemax="100"
        aria-valuetext="Loading Indicator" aria-label="Page Loading">
        <div class="loading-indicator">
          <div class="pe-loadingSpinner">
            <div class="pe-loadingSpinner-container">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
            <div class="pe-loadingSpinner-container">
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
              <div class="circle"></div>
            </div>
          </div>
          <span class="loading-text">Loading...</span>
        </div>
      </div>
    </div>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>accessible loading spinner</title>
	<!-- see http://pauljadam.com/demos/loading-indicator.html -->

	<style nonce="4AEemGb0xJptoIGFP3Nd">

	html {
	font-size: 1em;
	line-height: 1.3;
	font-family: sans-serif;
	}

	.pe-loadingSpinner {
	width: 25px;
	height: 25px;
	position: relative;
	}

	.loading-indicator-wrapper {
	border-radius: 5px;
	margin: auto;
	width: 200px;
	padding: 30px 20px 20px 20px;
	background-color: #252525;
	}

	.loading-indicator {
	color: white;
	margin: auto;
	width: 50%;
	background-color: #252525;
	}

	.pe-loadingSpinner {
	width: 25px;
	height: 25px;
	position: relative;
	}

	.pe-loadingSpinner-container {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.circle {
	width: 4px;
	height: 4px;
	background-color: #19A6A4;
	border-radius: 100%;
	position: absolute;
	animation: bouncedelay 1.6s infinite ease-in-out;
	animation-fill-mode: both;
	}

	.circle:nth-of-type(1) {
	top: 0;
	left: 0;
	}

	.circle:nth-of-type(2) {
	top: 0;
	right: 0;
	}

	.circle:nth-of-type(3) {
	right: 0;
	bottom: 0;
	}

	.circle:nth-of-type(4) {
	left: 0;
	bottom: 0;
	}

	.pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(2) {
	animation-delay: -1.2s;
	}

	.pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(3) {
	animation-delay: -0.8s;
	}

	.pe-loadingSpinner-container:nth-of-type(1) .circle:nth-of-type(4) {
	animation-delay: -0.4s;
	}

	.pe-loadingSpinner-container:nth-of-type(2) {
	transform: rotateZ(45deg);
	}

	.pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(1) {
	animation-delay: -1.4s;
	}

	.pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(2) {
	animation-delay: -1.0s;
	}

	.pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(3) {
	animation-delay: -0.6s;
	}

	.pe-loadingSpinner-container:nth-of-type(2) .circle:nth-of-type(4) {
	animation-delay: -0.2s;
	}

	@keyframes bouncedelay {

	0%,
	25%,
	100% {
	transform: scale(1);
	}

	12.5% {
	transform: scale(1.5);
	}
	}

	.loading-text {
	padding-left: 30px;
	display: block;
	margin: auto;
	width: 50%;
	position: relative;
	top: -20px;
	}
	</style>
	</head>
	<body>
	<div role="alert" aria-label="Loading" class="loading-indicator-liveregion"
	id="liveregion">
	<div class="loading-indicator-wrapper" id="spinner-icon"
	role="progressbar" aria-valuemin="0" aria-valuemax="100"
	aria-valuetext="Loading Indicator" aria-label="Page Loading">
	<div class="loading-indicator">
	<div class="pe-loadingSpinner">
	<div class="pe-loadingSpinner-container">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	</div>
	<div class="pe-loadingSpinner-container">
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	</div>
	</div>
	<span class="loading-text">Loading...</span>
	</div>
	</div>
	</div>
	</body>
	</html>