Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <ul class="progress">
- <!-- Item -->
- <li data-name="HTML & CSS" data-percent="87%"> <svg viewBox="-10 -10 220 220">
- <g fill="none" stroke-width="2" transform="translate(100,100)">
- <path d="M 0,-100 A 100,100 0 0,1 86.6,-50" stroke="url(#cl1)"/>
- <path d="M 86.6,-50 A 100,100 0 0,1 86.6,50" stroke="url(#cl2)"/>
- <path d="M 86.6,50 A 100,100 0 0,1 0,100" stroke="url(#cl3)"/>
- <path d="M 0,100 A 100,100 0 0,1 -86.6,50" stroke="url(#cl4)"/>
- <path d="M -86.6,50 A 100,100 0 0,1 -86.6,-50" stroke="url(#cl5)"/>
- <path d="M -86.6,-50 A 100,100 0 0,1 0,-100" stroke="url(#cl6)"/>
- </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="547"></path>
- </svg> </li>
- </ul>
- <!-- Defining Angle Gradient Colors -->
- <svg width="0" height="0">
- <defs>
- <linearGradient id="cl1" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
- <stop stop-color="#618099"/>
- <stop offset="100%" stop-color="#8e6677"/>
- </linearGradient>
- <linearGradient id="cl2" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
- <stop stop-color="#8e6677"/>
- <stop offset="100%" stop-color="#9b5e67"/>
- </linearGradient>
- <linearGradient id="cl3" gradientUnits="objectBoundingBox" x1="1" y1="0" x2="0" y2="1">
- <stop stop-color="#9b5e67"/>
- <stop offset="100%" stop-color="#9c787a"/>
- </linearGradient>
- <linearGradient id="cl4" gradientUnits="objectBoundingBox" x1="1" y1="1" x2="0" y2="0">
- <stop stop-color="#9c787a"/>
- <stop offset="100%" stop-color="#817a94"/>
- </linearGradient>
- <linearGradient id="cl5" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="0" y2="0">
- <stop stop-color="#817a94"/>
- <stop offset="100%" stop-color="#498a98"/>
- </linearGradient>
- <linearGradient id="cl6" gradientUnits="objectBoundingBox" x1="0" y1="1" x2="1" y2="0">
- <stop stop-color="#498a98"/>
- <stop offset="100%" stop-color="#618099"/>
- </linearGradient>
- </defs>
- </svg>
- /* Progress *//* 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;
- display: inline-block;
- padding: 0;
- text-align: center;
- overflow: visible;
- box-shadow: none;
- background-image: none;
- background-color: transparent;
- }
- svg:not(:root) {
- overflow: visible
- }
- /* 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: 10;
- stroke-dasharray: 600;
- stroke: rgba(249, 249, 249, 1);
- -webkit-animation: load 5s;
- -moz-animation: load 5s;
- -o-animation: load 5s;
- animation: load 5s;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement