Skip to content
Snippets Groups Projects
index.php 2.13 KiB
Newer Older
  • Learn to ignore specific revisions
  • Robert Goldmann's avatar
    Robert Goldmann committed
    <!doctype html>
    <?php
    $percentage = 75;
    
    ?>
    
    
    <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 */
    
    .progress {
      position: relative;
      display: inline-block;
      padding: 0;
      text-align: center;
    }
    
    /* Item */
    
    .progress>li {
      display: inline-block;
      position: relative;
      text-align: center;
      color: #93A2AC;
      font-family: Lato;
      font-weight: 100;
      margin: 2rem;
    }
    
    .progress>li:before {
      content: attr(data-name);
      position: absolute;
      width: 100%;
      bottom: -2rem;
      font-weight: 400;
    }
    
    .progress>li:after {
      content: attr(data-percent);
      position: absolute;
      width: 100%;
      top: 3.7rem;
      left: 0;
      font-size: 2rem;
      text-align: center;
    }
    
    .progress svg {
      width: 10rem;
      height: 10rem;
    }
    
    .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;
      stroke: rgba(255, 255, 255, 0.9);
      -webkit-animation: load 1s;
      -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>
    
    <body>
    <ul class="progress">
    	<!--  Item  -->
    	<li data-name="RMP-4.0" data-percent="<?php echo $percentage;?>%"> 
    		<svg viewBox="-10 -10 220 220">
    			<g fill="none" stroke-width="8" transform="translate(100,100)">
    				<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> 
    
    </body>
    </html>