Zapełnienie okręgu

pytanie zadane 17 sierpnia 2020 w HTML i CSS przez Szox Nowicjusz (230 p.)
edycja 17 sierpnia 2020 przez Patrycjerz

Siema, przychodzę do was z zapytaniem.

Czy ma ktoś może pomysł jak mogę wykonać takie okręgi?

5 odpowiedzi

odpowiedź 17 sierpnia 2020 przez niezalogowany

odpowiedź 17 sierpnia 2020 przez VBService Ekspert (252,660 p.)
edycja 17 sierpnia 2020 przez VBService

Moja propozycja : demo on-line

circle.html

<style>
  :root {
    --color-border-25: white;
    --color-border-50: white;
    --color-border-75: white;
    --color-border-100: white;
  }
  * {
    box-sizing: border-box;
  }
  .circle {
    width: 200px;
    height: 200px;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 5px solid;
    border-radius: 50%;
    transform: rotate(-45deg);
    border-right-color: var(--color-border-25);  
    border-bottom-color: var(--color-border-50);
    border-left-color: var(--color-border-75);
    border-top-color: var(--color-border-100);
    transition: border-color 0.75s;
  }
  .circle-show-percent {
    font-weight: bold;
    color: black;
    width: 25%;
    margin: 0 auto;  
    transform: rotate(45deg);
  }
</style>
<body>
<div id="circle" class="circle">
  <div id="circle-show-percent" class="circle-show-percent">0%</div>
</div>

<script>
const circle = document.getElementById("circle");
const circle_show_percent = document.getElementById("circle-show-percent");
let precent = 0;

const interval = setInterval( () => {
  precent += (precent < 100) ? 25 : -75;
  circle_show_percent.innerHTML = precent + "%";

  switch(precent) {
    case 25:
      circle.style.setProperty(`--color-border-25`, "black");
      circle.style.setProperty(`--color-border-50`, "white"); 
      circle.style.setProperty(`--color-border-75`, "white");
      circle.style.setProperty(`--color-border-100`, "white");
    break;
    case 50:
      circle.style.setProperty(`--color-border-50`, "black"); 
    break;
    case 75:
      circle.style.setProperty(`--color-border-75`, "black"); 
    break;
    case 100:
      circle.style.setProperty(`--color-border-100`, "black"); 
    break;
  }
}, 1000);
</script>
</body>

odpowiedź 17 sierpnia 2020 przez jankustosz1 Nałogowiec (35,880 p.)

odpowiedź 17 sierpnia 2020 przez DawidK Nałogowiec (37,910 p.)

Można pokombinować z wysokością/szerokością, zerować border dla części, które są niepotrzebne i zaokrąglać właściwościami (border-top-right-radius, border-bottom-left-radius itd) 75% trzeba chyba złożyć z 2 kawałków.

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Circle</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        *{
            box-sizing: border-box;
        }
        div {
            background-color: white;
            border: 3px solid black;
            margin-top: 20px;
        }

        .percent-25 {
            border-top-right-radius: 100px;
            border-bottom: 0;
            border-left: 0;
            margin-left: 108px;
            height: 100px;
            width: 100px;
        }

        .percent-50 {
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
            border-left: 0;
            height: 200px;
            margin-left: 108px;
            width: 100px;
        }

        .percent-75 {
            border: none;
            position: relative;
            margin-bottom: 260px;
        }

        .percent-75-a {
            border-top-right-radius: 100px;
            border-bottom-right-radius: 100px;
            border-left: 0;
            height: 200px;
            left: 100px;
            position: absolute;
            top: 0;
            width: 100px;
        }

        .percent-75-b {
            border-bottom-left-radius: 100px;
            border-top: 0;
            border-right: 0;
            height: 100px;
            left: 0px;
            position: absolute;
            top: 100px;
            width: 100px;
        }

        .percent-100 {
            border-radius: 50%;
            height: 200px;
            width: 200px;
        }

    </style>
</head>
<body>
    <div class='percent-25'></div>
    <div class='percent-50'></div>
    <div class='percent-75'>
        <div class='percent-75-a'></div>
        <div class='percent-75-b'></div>
    </div>
    <div class='percent-100'></div>
</body>
</html>

Mocno kombinowane, ale efekt powinien być taki:

odpowiedź 17 sierpnia 2020 przez ScriptyChris Mędrzec (190,190 p.)

Pokombinowałem z clip-path: https://codepen.io/JSHolic/pen/NWNrpLd

Z tym, że JS chyba nie ma bezpośredniego dostępu do konkretnych kroków z @keyframe w CSS, więc byłby problem z synchronizacją aktualizacji liczb dla mierzonego postępu. Poza tym animacja "skacze" przy przechodzeniu przez kroki, w których dodawany jest nowy punkt dla polygona - jest to trochę złagodzone funkcją linear, ale nadal widoczne.

Ciekawe jak by to działało przy użyciu Web Animations API.