tag gezocht

Door Jan R op 12-02-2022 10:45

2.058 views

Hoi,

Ik zoek een "tag" waarin ik een voortgang kan simuleren.
Ik ken de tag progress maar ik heb niet genoeg aan gedaan en nog te doen. Ik zoek iets met meerdere kleuren en secties die per sectie ook tekst kan bevatten.

Nu heb ik een image gemaakt met php maar 100% gelukkig ben ik er ook niet mee.
Ik heb ook geprobeerd met een div (width: 100%) met verschillende span of divs in met width: ##% maar als de tekst te groot is verminkt deze de sectie.

Iemand ideeen?

Jan

Ward van der Put

12-02-2022 12:34

https://material.io/components/progress-indicators

? Onbekende gebruiker

12-02-2022 19:36

Meestal verzin ik gewoon iets met bestaande HTML tags en wat CSS, eventueel vanille JavaScript.
Een willekeurige voortgangsindicator:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .voortgang {
        --hoogte: 40px;
        width: 200px;
        height: var(--hoogte);
        line-height: var(--hoogte);
        border: 1px solid gray;
        background-image: linear-gradient(to top, red 0%, blue 100%);
        background-repeat: no-repeat;
        text-align: center;
        color: yellow;
        font-weight: bold;
        font-family: sans-serif;
        text-shadow:
          1px  1px 0 green,
          1px -1px 0 green,
         -1px  1px 0 green,
         -1px -1px 0 green;
      }
    </style>
  </head>
  <body>
    <div class="voortgang" style="background-size: 73% 40px;">
      73 %
    </div>
  </body>
</html>

Met CSS kan je ook animaties gebruiken, doorzichtige kleuren en filter-effecten. Wil je iets er bij, dan doe je dat met CSS. Je kunt HTML pseudo-elementen gebruiken (::before en ::after) en als dat niet genoeg is, maak je er vanuit PHP gewoon een HTML element bij. Moet het iets speciaals wat niet kan met CSS? Dan kan je overwegen om JavaScript er bij te gebruiken (daar was het ooit voor bedoeld).

[size=xsmall]Toevoeging op 12/02/2022 19:39:16:[/size]

Eventueel kan je tekst in een div laten afbreken door:

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; 
}

Jan R

12-02-2022 21:15

deze oplossingen hebben allemaal spijtig genoeg maar 2 groepen/secties.
ik heb er meerdere nodig. 4 soms 5

R Rob Doemaarwat

12-02-2022 21:31

Je kunt zo'n background in net zoveel secties indelen als je wilt.


    <div style='position:relative; background-image: linear-gradient(to right, red 0%, red 25%,green 25%,green 50%,blue 50%, blue 75%, yellow 75%, yellow 100%); text-align: center'>
      <div id='todo' style='position: absolute; background: white; right: 0; top: 0; bottom: 0; left: 73%'></div>
    </div>

Jan R

12-02-2022 23:17

Inderdaad maar niet met tekst per sectie of zie ik iets verkeerd.

? Onbekende gebruiker

13-02-2022 10:49

Als ik jou was zou ik die voorgangsindicatoren gewoon achter elkaar zetten, dan heb je zoveel secties als je wilt op 1 regel. Wil je dat het mooi uitlijnt, dan kan je CSS flexbox gebruiken (in plaats van een tabel).

Voor wie CSS flexbox niet vaak genoeg gebruikt om het paraat te hebben is deze link wel handig:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties

Jan R

14-02-2022 07:05 gewijzigd op 14-02-2022 07:05

Aan flex heb ik eigenlijk niet gedacht. Werk hier zelden mee:)
Maar hoe los ik dan de tekstinhoud aan zodat deze past in de exacte breedte van de sectie?
Zover ik weet onbreekt er een css optie "fit"
dit zou handig zijn maar bestaat niet


.fit {
   font-size: 15px;
   overflow: fit;
}

Reageren

Inloggen om te reageren