Skip to content
Snippets Groups Projects
Commit 0a985d2e authored by Robert Goldmann's avatar Robert Goldmann
Browse files

implemented php

parent bd281dfa
Branches
Tags
No related merge requests found
Show whitespace changes
Inline Side-by-side
.gitignore 0 → 100644
+ 3
− 0
View file @ 0a985d2e
# Created by .ignore support plugin (hsz.mobi)
.idea/
/progress.iml
index.php
+ 73
− 102
View file @ 0a985d2e
<!doctype html> <!doctype html>
<?php <?php
$percentage = 75; $backgroundColor = "#FFFFFF";
$fontColor = "#444444";
?>
<html>
<head>
<meta charset="utf-8">
<title>Animated Circular Progress Bar Demos</title>
<style>
/* Load animation */
@-webkit-keyframes
load { 0% {
stroke-dashoffset:0
}
}
@-moz-keyframes
load { 0% {
stroke-dashoffset:0
}
}
@keyframes
load { 0% {
stroke-dashoffset:0
}
}
/* Container */ $percentage = 75;
// in vmin (useful between 0 and 100)
$elementSize = 35;
$progressColor = "#81c784";
$strokeWidth = "8";
.progress { $items = array(
position: relative; array("title" => "VideoShowCase", "percentage" => "75", "size" => "35", "progressColor" => "#81c784", "strokeWidth" => "8"),
display: inline-block; array("title" => "Progress", "percentage" => "33", "size" => "25", "progressColor" => "#ff0000", "strokeWidth" => "20")
padding: 0;
text-align: center;
}
/* Item */ );
.progress>li { function hex2rgb($hex)
display: inline-block; {
position: relative; $hex = str_replace("#", "", $hex);
text-align: center;
color: #93A2AC;
font-family: Lato;
font-weight: 100;
margin: 2rem;
}
.progress>li:before { if(strlen($hex) == 3)
content: attr(data-name); {
position: absolute; $r = hexdec(substr($hex, 0, 1) . substr($hex, 0, 1));
width: 100%; $g = hexdec(substr($hex, 1, 1) . substr($hex, 1, 1));
bottom: -2rem; $b = hexdec(substr($hex, 2, 1) . substr($hex, 2, 1));
font-weight: 400;
} }
else
.progress>li:after { {
content: attr(data-percent); $r = hexdec(substr($hex, 0, 2));
position: absolute; $g = hexdec(substr($hex, 2, 2));
width: 100%; $b = hexdec(substr($hex, 4, 2));
top: 3.7rem;
left: 0;
font-size: 2rem;
text-align: center;
} }
$rgb = array($r, $g, $b);
.progress svg { return $rgb;
width: 10rem;
height: 10rem;
} }
.progress svg:nth-child(2) { $rgb = hex2rgb($backgroundColor);
position: absolute; $progressBackgroundColor = 'rgba('.$rgb[0].', '.$rgb[1].', '.$rgb[2].', 0.9)';
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path { ?>
fill: none; <html>
stroke-width: 25; <head>
stroke-dasharray: 629; <meta charset="utf-8">
stroke: rgba(255, 255, 255, 0.9); <title>Progress</title>
-webkit-animation: load 1s; <link type="text/css" rel="stylesheet" href="style.css"/>
-moz-animation: load 1s;
-o-animation: load 1s;
animation: load 1s;
}
</style>
<link href="http://www.cssscript.com/wp-includes/css/sticky.css" rel="stylesheet" type="text/css">
</head> </head>
<body style="background-color: <?php echo $backgroundColor; ?>; color: <?php echo $fontColor; ?>;">
<body> <table>
<tr>
<td class="headline">Current Projects</td>
</tr>
<tr>
<td>
<ul class="progress"> <ul class="progress">
<!-- Item --> <?php
<li data-name="RMP-4.0" data-percent="<?php echo $percentage;?>%"> for($i = 0; $i < sizeof($items); $i++)
<svg viewBox="-10 -10 220 220"> {
<g fill="none" stroke-width="8" transform="translate(100,100)"> $item = $items[$i];
<path d="M 0,-100 A 100,100 0 0,1 0,100" stroke="#81c784"/>
<path d="M 0,100 A 100,100 0 0,1 -0,-100" stroke="#81c784"/>
</g>
</svg>
<svg viewBox="-10 -10 220 220">
<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" stroke-dashoffset="<?php echo ($percentage/100)* 629;?>"></path>
</svg>
</li>
echo '<li data-percent="' . $item["percentage"] . '%" id="item-'.$i.'">' .
'<svg viewBox="-10 -10 220 220" style="width: ' . $item["size"] . 'vmin; height: ' . $item["size"] . 'vmin;">' .
'<g fill="none" stroke-width="' . $item["strokeWidth"] . '" transform="translate(100,100)">' .
'<path d="M 0,-100 A 100,100 0 0,1 0,100" stroke="' . $item["progressColor"] . '"/>' .
'<path d="M 0,100 A 100,100 0 0,1 -0,-100" stroke="' . $item["progressColor"] . '"/>' .
'</g>' .
'</svg>' .
'<svg viewBox="-10 -10 220 220" style="width: ' . $item["size"] . 'vmin; height: ' . $item["size"] . 'vmin; stroke: ' . $progressBackgroundColor . ';">' .
'<path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 C0,155.228475 44.771525,200 100,200 C155.228475,200 200,155.228475 200,100 Z" '.
'stroke-dashoffset="' . ($item["percentage"] / 100) * 629 . '"></path>' .
'</svg>' .
'<style>' .
'#item-'.$i.':after {' .
'font-size: ' . ($item["size"] / 6) . 'vmin; top: ' . (($item["size"]) - ($item["size"] / 5)) / 2 . 'vmin;' .
'}' .
'</style>' .
'<div class="progress-title" style="font-size: ' . ($item["size"] / 10) . 'vmin;">'.$item["title"].'</div>' .
'</li>';
}
?>
</ul>
</td>
</tr>
</table>
</body> </body>
</html> </html>
\ No newline at end of file
style.css 0 → 100644
+ 81
− 0
View file @ 0a985d2e
/* Load animation */
@-webkit-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@-moz-keyframes load {
0% {
stroke-dashoffset: 0
}
}
@keyframes load {
0% {
stroke-dashoffset: 0
}
}
.progress {
position: relative;
padding: 0;
text-align: center;
}
.progress > li {
display: inline-block;
position: relative;
text-align: center;
font-weight: 100;
margin: 2rem;
}
.progress > li:after {
content: attr(data-percent);
position: absolute;
width: 100%;
left: 0;
text-align: center;
}
.progress svg:nth-child(2) {
position: absolute;
left: 0;
top: 0;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
}
.progress svg:nth-child(2) path {
fill: none;
stroke-width: 25;
stroke-dasharray: 629;
-webkit-animation: load 1s;
-moz-animation: load 1s;
-o-animation: load 1s;
animation: load 1s;
}
body {
padding: 0;
margin: 0;
font-family: Sans-Serif;
}
table {
width: 100vw;
height: 100vh;
text-align: center;
}
.progress-title{
margin-top: 3vmin;
}
.headline {
font-size: 6vmin;
padding-top: 3vmin;
}
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment