StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Try this code:</p> <p>PHP+HTML</p> <pre><code> <?php $num = 3; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Animated Progress Bar</title> <link rel="stylesheet" href="my.css"> </head> <body> <section class="container"> <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>> <label for="twenty" class="label">1</label> <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>> <label for="fourty" class="label">2</label> <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>> <label for="sixty" class="label">3</label> <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>> <label for="eighty" class="label">4</label> <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>> <label for="onehundred" class="label">5</label> <div class="progress"> <div class="progress-bar"></div> </div> </section> <section class="container"> <input type="radio" class="radio twenty2" name="progress2" value="twenty" id="twenty2" <?php if($num === 1) { echo 'checked'; } ?>> <label for="twenty2" class="label">1</label> <input type="radio" class="radio fourty2" name="progress2" value="fourty" id="fourty2" <?php if($num === 2) { echo 'checked'; } ?>> <label for="fourty2" class="label">2</label> <input type="radio" class="radio sixty2" name="progress2" value="sixty" id="sixty2" <?php if($num === 3) { echo 'checked'; } ?>> <label for="sixty2" class="label">3</label> <input type="radio" class="radio eighty2" name="progress2" value="eighty" id="eighty2"<?php if($num === 4) { echo 'checked'; } ?>> <label for="eighty2" class="label">4</label> <input type="radio" class="radio onehundred2" name="progress2" value="onehundred" id="onehundred2" <?php if($num === 5) { echo 'checked'; } ?>> <label for="onehundred2" class="label">5</label> <div class="progress2"> <div class="progress-bar"></div> </div> </section> </body> </html> </code></pre> <p>css:</p> <pre><code>body { font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif; color: #404040; background: #323232; } .container { margin: 80px auto; width: 640px; text-align: center; } .container .progress, .container .progress2 { margin: 0 auto; width: 150px; } .progress, .progress2 { padding: 4px; background: rgba(0, 0, 0, 0.25); border-radius: 6px; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08); } .progress-bar { position: relative; height: 10px; border-radius: 4px; -webkit-transition: 0.4s linear; -moz-transition: 0.4s linear; -o-transition: 0.4s linear; transition: 0.4s linear; -webkit-transition-property: width, background-color; -moz-transition-property: width, background-color; -o-transition-property: width, background-color; transition-property: width, background-color; -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1); } .progress-bar:before, .progress-bar:after { content: ''; position: absolute; top: 0; left: 0; right: 0; } .progress-bar:before { bottom: 0; border-radius: 4px 4px 0 0; } .progress-bar:after { z-index: 2; bottom: 45%; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05)); } .twenty:checked ~ .progress > .progress-bar, .twenty2:checked ~ .progress2 > .progress-bar { width: 20%; background-color: #f63a0f; } .fourty:checked ~ .progress > .progress-bar, .fourty2:checked ~ .progress2 > .progress-bar { width: 40%; background-color: #f27011; } .sixty:checked ~ .progress > .progress-bar, .sixty2:checked ~ .progress2 > .progress-bar { width: 60%; background-color: #f2b01e; } .eighty:checked ~ .progress > .progress-bar, .eighty2:checked ~ .progress2 > .progress-bar { width: 80%; background-color: #f2d31b; } .onehundred:checked ~ .progress > .progress-bar, .onehundred2:checked ~ .progress2 > .progress-bar { width: 100%; background-color: #86e01e; } .radio { display: none; } .label { display: inline-block; margin: 0 5px 20px; padding: 3px 8px; color: #aaa; text-shadow: 0 1px black; border-radius: 3px; cursor: pointer; } .radio:checked + .label { color: white; background: rgba(0, 0, 0, 0.25); } </code></pre> <p>this works great on me, you'll just need to modify the next name, class, and css of the next progress bars..</p> <p>In this case, I tried adding <code>progress2, twenty2</code> and so on the next progress bars..</p> <p>Well, If you want to create so many progress bars in a page, you may want to make the html inside php loop or you can use jQuery to manipulate the DOM...</p> <p>hope this works!</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload