Beispiel:CSS-calc-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!doctype html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <title>Automatische Fortschrittsanzeige</title>
 <style>
   body {
     font-family: sans-serif;
     max-width: 48rem;
     margin: auto;
     padding: .7rem;
   }

   section {
     margin-block: 2rem;
   }

   .timeline {
     display: flex;
     margin: 0;
     padding: 0;
     list-style: none;
     border: thin solid currentColor;
   }

   .step {
     /*
       Jeder Schritt kennt die Anzahl aller Schritte:

       Bei 3 Schritten: 100% / 3
       Bei 7 Schritten: 100% / 7

       Dadurch füllt die Fortschrittsanzeige immer genau 100% aus,
       egal wie viele Schritte im HTML stehen.
     */
     inline-size: calc(100% / sibling-count());

     box-sizing: border-box;
     padding-block: 1rem;
     text-align: center;
     background-color: #fffbf0;
     background-image: linear-gradient(#ebf5d7, #ebf5d7);
     background-repeat: no-repeat;
     background-size: 100% 100%;
   }

   .step + .step {
     border-inline-start: thin solid currentColor;
   }

   @media (prefers-reduced-motion: no-preference) {
     .step {
       /*
         sibling-index() ist die eigene Position.
         Damit startet Schritt 1 sofort, Schritt 2 etwas später,
         Schritt 3 noch etwas später usw.
       */
       animation-delay: calc((sibling-index() - 1) * 0.5s);
       background-size: 0% 100%;
       animation-duration: 0.5s;
       animation-fill-mode: forwards;
     }

     .step {
       animation-name: fill-step;
     }

     @keyframes fill-step {
       to {
         background-size: 100% 100%;
       }
     }
   }
 </style>

</head> <body>

Automatische Fortschrittsanzeige

 <button type="button" id="restart-animation">Animation neu starten</button>

 <section>

Drei Schritte

  1. Planen
  2. Gestalten
  3. Veröffentlichen
 </section>

 <section>

Sieben Schritte

  1. Idee
  2. Recherche
  3. Struktur
  4. Layout
  5. Inhalte
  6. Test
  7. Online
 </section>

 <script>
   document.addEventListener('DOMContentLoaded', function () {
     document.querySelector("#restart-animation").addEventListener("click", () => {
       document.getAnimations().forEach(animation => {
         animation.cancel();
         animation.play();
       });
     });
   });
 </script>

</body> </html>

Abgerufen am 15.06.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS-calc-2.html"