Loading Svg

Logonun Kod Kısmı

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="1 2 100 100" preserveAspectRatio="xMidYMid" class="lds-double-ring" style="background: url(http://discus.karayeltasarim.com/Resim/Upload/logo-tv-logo.png);background-repeat: no-repeat; background-size: 100px 100px;background-position: center; ">

width="200px" height="200px ->> svg 'nin boyutunu belirler.

style="background: url(http://discus.karayeltasarim.com/Resim/Upload/logo-tv-logo.png)->> arkaplana ekleyeceğimiz logonun yolunu gösteriyoruz.

background-size: 100px 100px;background-position: center->> eklediğimiz logonun boyutunu ve bulunacağı konumu ayarlıyoruz.

1.SİMGE DÖNMESİ

<circle cx="20" cy="20" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="40" stroke-width="8" stroke="#000080" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(231.335 50 50)">
<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="3.5s" begin="0s" repeatCount="indefinite"/>
</circle>

circle cx="50" cy="50" ->> Logonun etrafında dönen simgenin konumu belirlenir.

stroke-width="8" stroke="#000080" ->> Logonun etrafında dönen simgenin kalınlığını ve rengini ayarlarız.

dur="3.5s" ->> Logonun etrafında simgenin dönme hızını ayarlarız.

r=40 ->> Logoya yakınlık uzaklıkları ayarlarız.

rotate(231.335 50 50) ->> simgenin saat yönünde dönmesi için

2.SİMGENİN DÖNMESİ

<circle cx="50" cy="50" ng-attr-r="{{config.radius2}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-dasharray="{{config.dasharray2}}" ng-attr-stroke-dashoffset="{{config.dashoffset2}}" fill="none" stroke-linecap="round" r="35" stroke-width="8" stroke=" #FFFF00" stroke-dasharray="54.97787143782138 54.97787143782138" stroke-dashoffset="54.97787143782138" transform="rotate(-231.335 50 50)">
<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="3.5s" begin="0s" repeatCount="indefinite"/>
</circle>
circle cx="50" cy="50" ->> Logonun etrafında dönen simgenin konumu belirlenir.

stroke-width="8" stroke="#FFFF00" ->> Logonun etrafında dönen simgenin kalınlığını ve rengini ayarlarız.

dur="3.5s" ->> Logonun etrafında simgenin dönme hızını ayarlarız.

r=35 ->> Logoya yakınlık uzaklıkları ayarlarız.

rotate(231.335 50 50) ->> simgenin saat yönünün tersine dönmesi için

ÖRNEK KOD

<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px" viewBox="1 2 100 100" preserveAspectRatio="xMidYMid" class="lds-double-ring" style="background: url(http://discus.karayeltasarim.com/Resim/Upload/logo-tv-logo.png);background-repeat: no-repeat; background-size: 100px 100px;background-position: center; ">
<circle cx="50" cy="50" ng-attr-r="{{config.radius}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c1}}" ng-attr-stroke-dasharray="{{config.dasharray}}" fill="none" stroke-linecap="round" r="40" stroke-width="8" stroke="#000080" stroke-dasharray="62.83185307179586 62.83185307179586" transform="rotate(231.335 50 50)">
<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="5.5s" begin="0s" repeatCount="indefinite"/>
</circle>
<circle cx="50" cy="50" ng-attr-r="{{config.radius2}}" ng-attr-stroke-width="{{config.width}}" ng-attr-stroke="{{config.c2}}" ng-attr-stroke-dasharray="{{config.dasharray2}}" ng-attr-stroke-dashoffset="{{config.dashoffset2}}" fill="none" stroke-linecap="round" r="35" stroke-width="8" stroke=" #FFFF00" stroke-dasharray="54.97787143782138 54.97787143782138" stroke-dashoffset="54.97787143782138" transform="rotate(-231.335 50 50)">
<animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;-360 50 50" keyTimes="0;1" dur="3.5s" begin="0s" repeatCount="indefinite"/>
</circle>
</svg>