グラデーションの線を回転する動作のsvgロードアニメーションを、XMLベースの言語SMILで実装します。画像読み込みの管理ができるJavaScriptライブラリ、imagesLoaded（imagesloaded.pkgd.js）を利用しています。
svgタグで表示エリアをwidth="60"、height="60"で設定します。線が回転するエリアになります。描画エリアはviewBox="0 0 38 38"（X座標：0、Y座標：0、width：38px、height：38px）で設定します。円の4分の1＋余白を描画したエリアです。
グラデーションはdefs内にlinearGradientで設定し、id="a"を指定しておきます。pathのstrokeでurl(#a)のようにlinearGradientのidを指定すると線にグラデーションが適用されます。
グラデーションの線を回転する動作はSMILで記述しています。ただしSMILはIEでは動作しません。
animateTransformはトランスフォーム属性のアニメーションになります。
attributeName="transform" //アニメーションを行う属性名
type="rotate" //回転のアニメーションを指定
from="0 18 18" //0度から360度までの回転、X座標とY座標は固定
to="360 18 18" //0度から360度までの回転、X座標とY座標は固定
dur=".6s" //アニメーションを行う時間
repeatCount="indefinite" //永久にアニメーションを繰り返し
<svg class="p-loader-circle" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 38 38">
<defs>
<linearGradient x1="8.042%" y1="0%" x2="65.682%" y2="23.865%" id="a">
<stop stop-color="#000000" stop-opacity="0" offset="0%"/>
<stop stop-color="#000000" stop-opacity=".631" offset="63.146%"/>
<stop stop-color="#000000" offset="100%"/>
</linearGradient>
</defs>
<g transform="translate(1 1)">
<path d="M36 18c0-9.94-8.06-18-18-18" stroke="url(#a)" stroke-width="2" fill="none" fill-rule="evenodd">
<animateTransform
attributeName="transform"
type="rotate"
from="0 18 18"
to="360 18 18"
dur=".6s"
repeatCount="indefinite" />
</path>
</g>
</svg>
