Zum Hauptinhalt springen @keyframes default-loading { to { stroke-dashoffset: 292; } } #default-loading path { animation: default-loading 3s linear infinite; fill: none; stroke: currentColor; stroke-dasharray: 272 20; stroke-dashoffset: 0; stroke-linecap: square; /* prevents 'missing pixel' in Safari */ stroke-width: 5; }

Zum Hauptinhalt springen @keyframes four-squares-loading { 0% { transform: translateY(0); } 20% { transform: translateY(-10%); } 55% { transform: translateY(0); } 80% { transform: translateY(-3%); } 100% { transform: translateY(0); } } #four-squares-loading rect:nth-child(1) { animation: four-squares-loading 1.5s infinite ease-in-out; animation-delay: 1s; } #four-squares-loading rect:nth-child(2) { animation: four-squares-loading 1.5s infinite ease-in-out; animation-delay: 1.1s; } #four-squares-loading rect:nth-child(3) { animation: four-squares-loading 1.5s infinite ease-in-out; animation-delay: 1.2s; } #four-squares-loading rect:nth-child(4) { animation: four-squares-loading 1.5s infinite ease-in-out; animation-delay: 1.3s; }