body{
    margin:0;
    height:100vh;
    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    background:#f1f1f1;
    font-family:sans-serif;
  }

.loader{
    position:relative;
    width:220px;
    height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

.ring{
    position:absolute;
    border:4px solid #45b29d;
    border-radius:50%;
    width:100%;
    height:100%;
    animation:pulse 1.8s ease-out infinite;
    opacity:0;
  }

  /* trzy pierścienie z opóźnieniem - dają efekt "migania" jak na obrazku */
  .ring:nth-child(1){ animation-delay:0s; }
  .ring:nth-child(2){ animation-delay:0.6s; }
  .ring:nth-child(3){ animation-delay:1.2s; }

  @keyframes pulse{
    0%{
      transform:scale(0.3);
      opacity:0.9;
    }
    100%{
      transform:scale(1.1);
      opacity:0;
    }
  }

.label{
    position:relative;
    z-index:2;
    font-weight:bold;
    font-size:22px;
    text-align:center;
    line-height:1.1;
  }

p {
  margin: 0;
}