FJurmanovic/wallet-web
1
0
Fork 0
mirror of https://github.com/FJurmanovic/wallet-web.git synced 2026-02-06 06:08:10 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

implemented custom circle loaders

Browse Source
This commit is contained in:
Fran Jurmanović
2021-06-05 20:38:12 +02:00
parent cf537b923c
commit 8ef770921e
11 changed files with 210 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/circle-loader/circle-loader.scss Normal file
View File

@@ -0,0 +1,44 @@
.circle-loader {
$--loader-border: 6px;
$--loader-size: 45px;
border: $--loader-border solid $gray-02;
border-top: $--loader-border solid $blue-08;
width: $--loader-size;
height: $--loader-size;
border-radius: 50%;
animation: spin 2s linear infinite;
margin: 5px;
&.-sml {
$--loader-border: 3px;
$--loader-size: 22px;
border: $--loader-border solid $gray-02;
border-top: $--loader-border solid $blue-08;
width: $--loader-size;
height: $--loader-size;
}
&.-med {
$--loader-border: 9px;
$--loader-size: 67px;
border: $--loader-border solid $gray-02;
border-top: $--loader-border solid $blue-08;
width: $--loader-size;
height: $--loader-size;
}
&.-lrg {
$--loader-border: 12px;
$--loader-size: 90px;
border: $--loader-border solid $gray-02;
border-top: $--loader-border solid $blue-08;
width: $--loader-size;
height: $--loader-size;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

1
src/styles/circle-loader/index.scss Normal file
View File

@@ -0,0 +1 @@
@import "./circle-loader.scss";

1
src/styles/main.scss
View File

@@ -5,3 +5,4 @@
@import "./modal/index.scss";
@import "./table/index.scss";
@import "./app-loader/index.scss";
@import "./circle-loader/index.scss";