New Spinner SVG without CSS animtion

dahln · Mar 13, 2024 · 63ac10c · 63ac10c
1 parent f7204ae
commit 63ac10c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 29 deletions.
diff --git a/BlazorSpinner/BlazorSpinner.csproj b/BlazorSpinner/BlazorSpinner.csproj
@@ -10,15 +10,15 @@
   </ItemGroup>
 
   <PropertyGroup>
-    <Version>1.5.0</Version>
+    <Version>2.0.0</Version>
     <Authors>dahln</Authors>
-    <PackageReleaseNotes>v1.5.0: Updated to .NET 8</PackageReleaseNotes>
+    <PackageReleaseNotes>v2.0.0: New Spinner SVG without CSS animtion</PackageReleaseNotes>
     <Description>BlazorSpinner is a loading spinner that can be included in Blazor applications. It has a simple service that can be called to "show" or "hide" the spinner.</Description>
     <GeneratePackageOnBuild>true</GeneratePackageOnBuild>
 	<License>https://github.com/dahln/blazorspinner/blob/master/LICENSE</License>
     <RepositoryUrl>https://github.com/dahln/blazorspinner</RepositoryUrl>
     <RepositoryType>GitHub</RepositoryType>
-    <Copyright>Copyright (c) 2023 Dahln Farnes</Copyright>
+    <Copyright>Copyright (c) 2024 Dahln Farnes</Copyright>
     <PackageTags>blazor,spinner,loading</PackageTags>
   </PropertyGroup>
 

diff --git a/BlazorSpinner/Spinner.razor b/BlazorSpinner/Spinner.razor
@@ -8,17 +8,6 @@
         height: 100vh;
     }
 
-    .loading-container i {
-        color: white;
-    }
-
-    .loading-icon {
-        position: fixed;
-        top: 30%;
-        left: 50%;
-        margin-left: -55px; /* Negative half of width. */
-    }
-
     .loading-overlay {
         position: fixed;
         top: 0;
@@ -29,27 +18,20 @@
         height: 100%;
     }
 
-    @@-webkit-keyframes infiniteRotate {
-        0% { -webkit-transform: rotate(0deg); }
-        100% { -webkit-transform: rotate(360deg); }
-    }
-    /* Standard syntax */
-    @@keyframes infinite-rotate {
-        0% { -webkit-transform: rotate(0deg); }
-        100% { -webkit-transform: rotate(360deg); }
-    }
-    .spin {
-        -webkit-animation: infiniteRotate 2s linear infinite; /* Safari */
-        animation: infiniteRotate 2s linear infinite;
-    }
-
 </style>
 @if (IsVisible)
 {
 
     <div class="loading-overlay">
         <div class="loading-container">
-            <svg color="white" width="100" height="100" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-notch" class="spin loading-icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M288 39.056v16.659c0 10.804 7.281 20.159 17.686 23.066C383.204 100.434 440 171.518 440 256c0 101.689-82.295 184-184 184-101.689 0-184-82.295-184-184 0-84.47 56.786-155.564 134.312-177.219C216.719 75.874 224 66.517 224 55.712V39.064c0-15.709-14.834-27.153-30.046-23.234C86.603 43.482 7.394 141.206 8.003 257.332c.72 137.052 111.477 246.956 248.531 246.667C393.255 503.711 504 392.788 504 256c0-115.633-79.14-212.779-186.211-240.236C302.678 11.889 288 23.456 288 39.056z"></path></svg>
+
+           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="loading-icon" style="margin: auto; background: transparent; display: block; shape-rendering: auto;" width="153px" height="153px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+                <circle cx="50" cy="50" fill="none" stroke="white" stroke-width="10" r="36" stroke-dasharray="169.64600329384882 58.548667764616276">
+                    <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="3.2258064516129035s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+                </circle>
+                <!-- [ldio] generated by https://loading.io/ -->
+            </svg>
+
         </div>
     </div>
 }