<div class="row basics">
					<ul class="progress">
						<!--  Item  -->
						<li data-name="PowerPoint" data-percent="99%">
							<svg viewBox="-10 -10 220 220">
								<g fill="none" stroke-width="6" 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="615">
								</path>
        					</svg>
						</li>
    					<!--  Item  -->
						<li data-name="AutoCAD" data-percent="75%">
							<svg viewBox="-10 -10 220 220">
								<g fill="none" stroke-width="6" 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="480">
								</path>
							</svg>
						</li>
						<!--  Item  -->
						<li data-name="Java" data-percent="70%">
							<svg viewBox="-10 -10 220 220">
								<g fill="none" stroke-width="6" 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="440">
							 </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>
				</div>