Gradient Spinner 1

by Cristiano Oliveira

HTML

<overview-spinner _ngcontent-ijc-c266="" id="unix_cpu_usage" class="unix_cpu_usage" _nghost-ijc-c240="" style="margin-top: 0vw;">
<div _ngcontent-ijc-c240="" class="title ng-star-inserted">CPU Usage</div>
<!---->
<resource-navigation-controls _ngcontent-ijc-c240="" tabindex="0" _nghost-ijc-c233="" class="focusable">
	<div _ngcontent-ijc-c240="" class="l_ square-container svgWrap">
		<div _ngcontent-ijc-c240="" class="square-content">
			<div _ngcontent-ijc-c240="" class="svgValue ng-star-inserted">  </div>
				<!---->
				<svg _ngcontent-ijc-c240="" id="cpuSpinner" xmlns="http://www.w3.org/2000/svg" viewBox="-150 40 300 300" class="ng-star-inserted" style="animation-duration: 5s;">
					<defs _ngcontent-ijc-c240="">
						<linearGradient _ngcontent-ijc-c240="" id="blade-gradient" x1="0.94" y1="0.59" x2="0.07" y2="0.41">
							<stop _ngcontent-ijc-c240="" offset="0" stop-color="#212121"></stop>
							<stop _ngcontent-ijc-c240="" offset="1" stop-color="#aaa"></stop>
						</linearGradient>
						<linearGradient _ngcontent-ijc-c240="" id="blade-gradient2" x1="0.5" y1="1" x2="0.5" y2="0" href="#blade-gradient"></linearGradient>
						<linearGradient _ngcontent-ijc-c240="" id="blade-gradient3" x1="0" y1="0.5" x2="1" y2="0.5" href="#blade-gradient"></linearGradient>
						<linearGradient _ngcontent-ijc-c240="" id="blade-gradient4" x1="0.5" x2="0.5" y1="0" y2="1" href="blade-gradient"></linearGradient>
						<g _ngcontent-ijc-c240="" id="spinner">
							<g _ngcontent-ijc-c240="" id="spinner-blades">
								<path _ngcontent-ijc-c240="" d="m0 65.01l22.96 24.11 -24.33 21.44c-33.67 0.09-64.73 22.4-74.78 55.92 -2.48 8.22-3.88 17.1-3.29 28.08l-20.7-22.53 -25.57 17.94c0.68-73.23 59.7-125.3 125.7-124.96z" fill="url(#blade-gradient)"></path>
								<path _ngcontent-ijc-c240="" d="m123.6 189.84l-23.8 16.2 -21.97-21.22c-3.38-45.02-40.34-74.78-79.62-74.32l24.2-21.32 -22.78-24.2c68.85 0.53 124.65 56.54 123.96 124.86z" fill="url(#blade-gradient)"></path>
								<path...

CSS

*, :after, :before {
    box-sizing: border-box;
}

html {
    font-family: sans-serif;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body {
    font-family: Open Sans,Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,San Francisco,sans-serif;
    font-size: .875rem;
    line-height: 1.428571429;
    color: #c8c8c8;
    text-align: left;
    background-color: #3c3c3c;
}
body {
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.xtitle[_ngcontent-ijc-c240] {
    font-size: .7vw;
    margin: 0;
}

[_nghost-ijc-c233] {
    position: relative;
    display: block;
}


.svgWrap[_ngcontent-ijc-c240] {
    position: relative;
    overflow: hidden;
    width: 75%;
    margin: 0.6vw auto 0.5vw;
}
.square-container[_ngcontent-ijc-c240] {
    position: relative;
    margin-top: 0.6vw;
    margin-bottom: 0.5vw;
}
#unix_cpu_usage[_ngcontent-ijc-c266] .svgWrap {
    width: 100%;
}
.square-container[_ngcontent-ijc-c240]:before {
    display: block;
    margin-top: 100%;
    content: " ";
}
.square-container[_ngcontent-ijc-c240] .square-content[_ngcontent-ijc-c240] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.svgWrap[_ngcontent-ijc-c240] .svgValue[_ngcontent-ijc-c240] {
    font-size: 1.5vw;
    font-weight: 700;
    position: absolute;
    top: 37%;
    width: 100%;
    text-align: center;
    color: #fff;
}
img, svg {
    vertical-align: middle;
}
svg {
    overflow: hidden;
}
.svgWrap[_ngcontent-ijc-c240] #cpuSpinner[_ngcontent-ijc-c240] {
    cursor: pointer;
    -webkit-animation-name: spin;
    animation-name: spin;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.svgWrap.l_[_ngcontent-ijc-c240] #cpuSpinner[_ngcontent-ijc-c240], .svgWrap.l_None[_ngcontent-ijc-c240] #cpuSpinner[_ngcontent-ijc-c240] {
    cursor:...