D3vugu-components/icons/l-loading-circle.vugu
David Vogel 34780386f6 Add loading overlay
- Update overlay example page
- Add LLoadingCircle icon
- Rename LErrorCircle to LWarningCircle
- Change ToastMessageTypeCaution to use LWarningCircle
2023-05-28 16:47:10 +02:00

54 lines
1.3 KiB
Plaintext

<svg viewBox="0 0 16 16" vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-icon d3-lineicon"}'>
<circle class="d3c-1685282596-path d3c-icon-stroke" cx="8" cy="8" r="7.5" stroke-width="1" stroke-linejoin="round" stroke-linecap="round" fill="none"/>
</svg>
<style>
.d3c-icon {
height: 1em;
}
.d3c-icon-stroke {
stroke: var(--d3c-color-text);
}
.d3c-icon-fill {
fill: var(--d3c-color-text);
}
.d3c-icon-use-color .d3c-icon-stroke {
stroke: var(--d3c-color-background);
}
.d3c-icon-use-color .d3c-icon-fill {
fill: var(--d3c-color-background);
}
/*Custom stuff for the animation.*/
.d3c-1685282596-path {
stroke-dasharray: 150, 200;
stroke-dashoffset: -10;
animation: d3c-1685282596-rotate 2s linear infinite, d3c-1685282596-dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
transform-origin: center;
}
@keyframes d3c-1685282596-rotate {
100% {transform: rotate(360deg);}
}
@keyframes d3c-1685282596-dash {
0% {stroke-dasharray: 1, 75; stroke-dashoffset: 0;}
50% {stroke-dasharray: 33, 75; stroke-dashoffset: -13;}
100% {stroke-dasharray: 33, 75; stroke-dashoffset: -46;}
}
</style>
<script type="application/x-go">
import (
"git.d3nexus.de/Dadido3/D3vugu-components/utils"
)
type LLoadingCircle struct{
AttrMap vugu.AttrMap
}
</script>