Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* as you see, following snipped is planned to used with php rather than static languages like html.
- following variables should be definied in the beginning:
- $amout = "10,50"; The amount, what you got so far, without unit!
- $goal = "50,00"; The amount, how much you want to raise, without unit!
- $dpercent = $amount / $goal * 100; just copy that.
- $dcolora = "#4D657A"; First Color
- $dcolorb = "#4D357A"; Second Color, if different as first color you'll get a gradient effect
- */
- HTML:
- <div class="progress-bg">
- <div class="progress-bar">
- <h3 class="raised"><?php echo"€ " . $amount ?></h3>
- </div>
- <h3 class="goal"><?php echo "Goal: € " . $goal ?></h3>
- </div>
- CSS:
- .progress-bar {
- height: 78px;
- border-radius: 10px;
- float: left;
- width: 30%;
- /* fallback */
- background-color: <?php echo $dcolorb ?>;
- /* Safari 4-5, Chrome 1-9 */
- background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(<?php echo $dcolorb ?>), to(<?php echo $dcolora ?>));
- /* Safari 5.1, Chrome 10+ */
- background: -webkit-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
- /* Firefox 3.6+ */
- background: -moz-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
- /* IE 10 */
- background: -ms-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
- /* Opera 11.10+ */
- background: -o-linear-gradient(top, <?php echo $dcolorb ?>, <?php echo $dcolora ?>);
- }
- @-webkit-keyframes progress-bar {
- from { width: 0%; }
- to { width: <?php echo $dpercent ?>%; }
- }
- @-moz-keyframes progress-bar {
- from { width: 0%; }
- to { width: <?php echo $dpercent ?>%; }
- }
- @-o-keyframes progress-bar {
- from { width: 0%; }
- to { width: <?php echo $dpercent ?>%; }
- }
- @keyframes progress-bar {
- from { width: 0%; }
- to { width: <?php echo $dpercent ?>%; }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement