@keyframes ring {
    0% { transform: rotate(0deg) }
    50% { transform: rotate(180deg) }
    100% { transform: rotate(360deg) }
  }

  .ring div {
    position: absolute;
    animation: ring 1s linear infinite;
    width: 160px;
    height: 160px;
    top: 20px;
    left: 20px;
    border-radius: 50%;
    box-shadow: 0 4px 0 0 #3b81d8;
    transform-origin: 80px 82px;
  }

  .loading {
    width: 200px;
    height: 200px;
    display: inline-block;
    overflow: hidden;
    background-image: url("icons/Icon-192.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 140px 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .ring {
    width: 100%;
    height: 100%;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0;
  }

  .ring div { box-sizing: content-box; }