Advertisement
SoerenHelms

Progress Bar

Sep 12th, 2020
1,253
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.16 KB | None | 0 0
  1. /* as you see, following snipped is planned to used with php rather than static languages like html.
  2. following variables should be definied in the beginning:
  3.  
  4. $amout = "10,50";       The amount, what you got so far, without unit!
  5. $goal = "50,00";        The amount, how much you want to raise, without unit!
  6. $dpercent = $amount / $goal * 100;  just copy that.
  7. $dcolora = "#4D657A";       First Color
  8. $dcolorb = "#4D357A";       Second Color, if different as first color you'll get a gradient effect
  9.  
  10. */
  11.  
  12. HTML:
  13.  
  14. <div class="progress-bg">
  15.     <div class="progress-bar">
  16.         <h3 class="raised"><?php echo"&euro;&nbsp;" . $amount ?></h3>
  17.     </div>
  18.     <h3 class="goal"><?php echo "Goal:&nbsp;&euro;&nbsp;" . $goal ?></h3>
  19. </div>
  20.  
  21.  
  22. CSS:
  23.  
  24. .progress-bar {
  25.             height: 78px;
  26.             border-radius: 10px;
  27.             float: left;
  28.             width: 30%;
  29.             /* fallback */
  30.             background-color: <?php echo $dcolorb ?>;
  31.  
  32.             /* Safari 4-5, Chrome 1-9 */
  33.             background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<?php echo $dcolorb ?>), to(<?php echo $dcolora ?>));
  34.  
  35.             /* Safari 5.1, Chrome 10+ */
  36.             background: -webkit-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
  37.  
  38.             /* Firefox 3.6+ */
  39.             background: -moz-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
  40.  
  41.             /* IE 10 */
  42.             background: -ms-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
  43.  
  44.             /* Opera 11.10+ */
  45.             background: -o-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
  46.         }
  47.  
  48.         @-webkit-keyframes progress-bar {
  49.             from { width: 0%; }
  50.             to { width: <?php echo $dpercent ?>%; }
  51.         }
  52.  
  53.         @-moz-keyframes progress-bar {
  54.             from { width: 0%; }
  55.             to { width: <?php echo $dpercent ?>%; }
  56.         }
  57.  
  58.         @-o-keyframes progress-bar {
  59.             from { width: 0%; }
  60.             to { width: <?php echo $dpercent ?>%; }
  61.         }
  62.  
  63.         @keyframes progress-bar {
  64.             from { width: 0%; }
  65.             to { width: <?php echo $dpercent ?>%; }
  66.         }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement