prehistoric-systems/Gitako
1
1
Fork 0
mirror of https://github.com/EnixCoda/Gitako.git synced 2026-03-11 08:54:44 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: use hourglass icon for loading

Browse source
This commit is contained in:
EnixCoda 2020-05-29 22:28:33 +08:00
parent 66871fcbd2
commit 9f4e0d80ce
No known key found for this signature in database
GPG key ID: 0C1A07377913A1DD
3 changed files with 32 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/Icon.tsx
View file

@ -8,6 +8,7 @@ import {
FileZipIcon as FileZip,
GearIcon as Gear,
GrabberIcon as Grabber,
HourglassIcon as Hourglass,
Icon as OcticonIcon,
IconProps,
MarkdownIcon as Markdown,
@ -25,6 +26,11 @@ function getSVGIconComponent(
name: string
} {
switch (type) {
case 'hourglass':
return {
IconComponent: Hourglass,
name: 'Hourglass',
}
case 'submodule':
return {
IconComponent: Submodule,

2
src/components/LoadingIndicator.tsx
View file

@ -8,7 +8,7 @@ export function LoadingIndicator({ text }: Props) {
return (
<div className={'loading-indicator-container'}>
<div className={'loading-indicator'}>
<Icon className={'loading-indicator-icon'} type={'gear'} />
<Icon className={'loading-indicator-icon'} type={'hourglass'} />
{text}
</div>
</div>

26
src/content.scss
View file

@ -295,7 +295,7 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
.octicon {
width: 20px;
height: 20px;
animation: rotate 2s infinite linear;
animation: pulse-rotate 1.8s infinite ease;
}
}
}
@ -558,3 +558,27 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header-
transform: rotateZ(360deg);
}
}
@keyframes pulse-rotate {
0% {
transform: rotateZ(0);
}
20% {
transform: rotateZ(190deg);
}
30% {
transform: rotateZ(175deg);
}
50% {
transform: rotateZ(180deg);
}
70% {
transform: rotateZ(370deg);
}
80% {
transform: rotateZ(355deg);
}
100% {
transform: rotateZ(360deg);
}
}