how can I convert the text into a progress bar?

Question

Hier ist das bildI wanted to convert the text into a progressbar but do not know how I could do that. Could you help me? I have tried many things.

I hope you can help me and understands what I write, thanks for that.

 $df = disk_free_space("E:");
 $dt = disk_total_space("E:");
 $du = $dt - $df;
 $dp = sprintf('%.2f',($du / $dt) * 100);
 $df = formatSize($df);
 $du = formatSize($du);
 $dt = formatSize($dt);

 function formatSize( $bytes )
 {
     $types = array( 'B', 'KB', 'MB', 'GB', 'TB' );
     for( $i = 0; $bytes >= 1024 && $i < ( count( $types ) -1 ); $bytes /= 1024, $i++ );
     return( round( $bytes, 2 ) . " " . $types[$i] );
 }

 ?>
 <div class="pbl">
 <table class='ipb_table' cellspacing='1'>
     <tr>
         <td class='row2' colspan='2'>
             <div class='progress'>
                 <div class='prgbar'></div>
             </div>
         </td>
     <tr>
         <td class='row2'>
             Gesamter Speicher:
         </td>
         <td class='row2'>
             <?php echo "$dt"; ?>
         </td>
     </tr>
     <tr>
         <td class='row2'>
             Frei:
         </td>
         <td class='row2'>
             <?php echo "$df"; ?>
         </td>
     </tr>
     <tr>
         <td class='row2'>
             Gebraucht:
         </td>
         <td class='row2'>
             <?php echo "$du"; ?>
         </td>
     </tr>
     <tr>
         <td class='row2' colspan='2' align='center'>
             <a class='ipsButton' id='go'>Refresh<a>
         </td>
     </tr>
 </table>
 </div>

one way to make a cutom progress bar is to change the width of an (colred) elemet inside another alement. So it's basicly changing the css values of that element depending on the values you've got. — Jeff, Mar 11 '16 at 22:16
but there are loads of templates/scripts/addons out there that do that pretty well. (bootstrap combined with jquery just to mention the most common one) — Jeff, Mar 11 '16 at 22:17
but it seems you don't want to chang it dynamicly anyway, so a simple colered elememt with a specified width should do the job! — Jeff, Mar 11 '16 at 22:18
Hes attempting to make a progress bar to show disk space usage( I'm assuming). — Kisaragi, Mar 11 '16 at 22:18
and we i made this? i have no idea to show disk space in a progress bar — serverhoster, Mar 11 '16 at 22:21
@serverhoster: wir können deutsch schreiben, so verstehen wir uns besser... Ich geb Dir gleich ein paar links und hints wie man sowas machen kann! — Jeff, Mar 11 '16 at 22:25
@serverhoster Assuming you want to show a progress bar in the browser, you could use the [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress) element. If you want it to move then you will have to write some Javascript to add the movement. — Sverri M. Olsen, Mar 11 '16 at 22:29
Related and possibly duplicate: [https://stackoverflow.com/questions/3951903/how-to-make-a-progress-bar?rq=1](https://stackoverflow.com/questions/3951903/how-to-make-a-progress-bar?rq=1) — Cave Johnson, Mar 11 '16 at 22:32
here are some useful links: [progress-element](http://www.w3schools.com/tags/tag_progress.asp), [bootstrap version](http://www.w3schools.com/bootstrap/bootstrap_progressbars.asp) (requires Bootstrap), [more info about that element](http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/) — Jeff, Mar 11 '16 at 22:34
@Jeff und wie füge ich den code so ein das der den speicher als progress bar anzeigt? — serverhoster, Mar 11 '16 at 22:36
@SverriM.Olsen: since the english was hard to understand (hence the 5 likes for 'no Idea what the question is) I thought I could best help him using his language. But I totally get this would exclude many others. sry. — Jeff, Mar 11 '16 at 22:37
all i know is from world war II movies; Achtung, Das Boot .... — , Mar 11 '16 at 22:42
you cannot show the percentage inside the progressbar (in this html5 version), just add it afterwards (updated my answer with that) - or go with the other versions in the answer @Andrew linked to. — Jeff, Mar 11 '16 at 22:53
@Dagon [*Das Auto...*](http://www.vw.com/) - [*baby...*](http://www.u2.com/music/Albums/4009/Achtung+Baby) — Funk Forty Niner, Mar 11 '16 at 23:22
@Jeff this with the percent it is not working when i put this in comes the same percent on the other — serverhoster, Mar 12 '16 at 13:06

score 0 · Accepted Answer · answered Mar 11 '16 at 22:51

0

What you are looking for is the 'newly' added html element <progress>. Note that older browsers won't be able to render that element.

In your case the implementation would be:

<progress value="<?php echo intval($du); ?>" max="<?php echo intval($dt); ?>">
   fallback text if the browser doesn't support progress-element
</progress><?php echo $dp; ?>

(also note, that those inline echos are not considered good coding style, but for simplicity here I kept it)

For further possibilities (and more compatibility with older browsers) check out this question and it's many answers: How to make a progress bar

answered Mar 11 '16 at 22:51

Jeff

6,895
1
15
33

that what you edit its not realy working when i put this in it says 41.81 and other the same – serverhoster Mar 11 '16 at 23:03
well, yes, then it's 41.81 %! But adding a percentage sign should not be that hard, is it? – Jeff Mar 11 '16 at 23:11
and what i can do? – serverhoster Mar 11 '16 at 23:13
what about that: `%` – Jeff Mar 12 '16 at 01:09
es funktioniert nicht da steht immer nur 41,71% bei jedem – serverhoster Mar 12 '16 at 10:08
verschieb line 4 (`$dp = sprintf(...)` unter die line 7 (`$dt=formatSize...`) – Jeff Mar 12 '16 at 16:17
ich habe das gemacht hat aber nichts geholfen kannst du mal das machen mit dem verschieben – serverhoster Mar 13 '16 at 10:56
was meinst Du mit "da steht immer nur 41,71% bei jedem"? es gibt ja nur ein progressbar, deshalb kann auch nur einmal 41,71% stehen, und das klingt plausibel. – Jeff Mar 13 '16 at 13:34
so meinte ich das, bei jedem kann ja nicht 41.29% stehen das ist ja nicht mal richtig http://i.stack.imgur.com/Cfvb2.png – serverhoster Mar 13 '16 at 17:06
habe es schon selbst hinbekommen aber danke nochmal für alles sie sind der beste – serverhoster Mar 13 '16 at 19:30
gerne. Noch ein kommentar: macht es wirklich Sinn 2 Progressbars zu haben?? Der freie Speicherplatz erscheint ja auch im ersten progressabar (als der hellblaue Rest )! Deshalb bin ich nicht darauf bekommen dass sie 2 verschiedene Zahlen wollen... Danke fürs akzeptieren! – Jeff Mar 13 '16 at 20:29

how can I convert the text into a progress bar?

1 Answers1