mirror of
https://github.com/hcengineering/platform.git
synced 2025-04-02 05:56:48 +00:00
73 lines
2.0 KiB
Svelte
73 lines
2.0 KiB
Svelte
<!--
|
|
// Copyright © 2020 Anticrm Platform Contributors.
|
|
//
|
|
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License. You may
|
|
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
//
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
-->
|
|
<script lang="ts">
|
|
import type { ButtonSize } from '../types'
|
|
|
|
export let size: ButtonSize = 'medium'
|
|
</script>
|
|
|
|
<div class="spinner spinner-{size}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<linearGradient id="a" gradientUnits="userSpaceOnUse" x1="0" y1="22" x2="0" y2="2">
|
|
<stop offset="0" stop-color={'var(--caption-color)'} />
|
|
<stop offset="1" stop-color={'var(--caption-color)'} stop-opacity="0" />
|
|
</linearGradient>
|
|
<g>
|
|
<animateTransform
|
|
attributeName="transform"
|
|
attributeType="XML"
|
|
type="rotate"
|
|
from="0 12 12"
|
|
to="360 12 12"
|
|
dur="1s"
|
|
repeatCount="indefinite"
|
|
/>
|
|
<path
|
|
d="M12,22.5C6.2,22.5,1.5,17.8,1.5,12C1.5,6.2,6.2,1.5,12,1.5v-1C5.6,0.5,0.5,5.6,0.5,12c0,6.4,5.1,11.5,11.5,11.5V22.5z"
|
|
fill="var(--caption-color)"
|
|
/>
|
|
<path
|
|
d="M12,0.5v1c5.8,0,10.5,4.7,10.5,10.5c0,5.8-4.7,10.5-10.5,10.5v1c6.4,0,11.5-5.1,11.5-11.5C23.5,5.6,18.4,0.5,12,0.5z"
|
|
fill="url(#a)"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.spinner {
|
|
&-inline {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
}
|
|
&-small {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
&-medium {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
&-large {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
&-x-large {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
}
|
|
}
|
|
</style>
|