pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement directory navigator in svelte

Browse Source
This commit is contained in:
Wim Brand
2020-11-11 00:00:54 +01:00
parent eb94d4190c
commit 253315a9b7
26 changed files with 6406 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
svelte/src/filesystem.js Normal file
View File

@@ -0,0 +1,8 @@
import App from './filesystem/Filesystem.svelte';
const app = new App({
target: document.body,
props: {}
});
export default app;

322
svelte/src/filesystem/Filesystem.svelte Normal file
View File

@@ -0,0 +1,322 @@
<script>
import { onMount } from 'svelte';
import { formatDate, formatDataVolume, formatThousands } from '../util/Formatting.svelte'
import Sharebar from './Sharebar.svelte'
import Spinner from '../util/Spinner.svelte'
import Modal from '../util/Modal.svelte'
import Directory from './viewers/Directory.svelte';
let file = {
views: 6,
downloads: 12,
size: 24,
}
// Elements
let file_viewer
let header_bar
let toolbar_visible = (window.innerWidth > 800)
let toolbar_toggle = () => {
toolbar_visible = !toolbar_visible
if (!toolbar_visible) {
sharebar.setVisible(false)
}
}
let sharebar
let sharebar_visible = false
let details;
let details_visible = false
let preview
// State
let currentNode = initialNode
let loading = true
let viewer_type = ""
const download = () => {
file.downloads++
}
const navigate = (path) => {
fetch(
apiEndpoint+"/filesystem/"+currentNode.bucket.id+"/"+encodeURIComponent(path)+"?stat",
).then(resp => resp.json()).then(resp => {
window.history.pushState(
"page2",
resp.base.name+" in "+resp.bucket.name+" ~ pixeldrain",
"/d/"+resp.bucket.id+resp.base.path,
)
currentNode = resp
openPath()
}).catch(err => {
loading = false
alert(err)
})
}
const openPath = () => {
console.log(currentNode.base.type)
if (currentNode.base.type === "bucket" || currentNode.base.type === "dir") {
viewer_type = "dir"
}
loading = false
}
const keydown = e => {
switch (e.key) {
case 'Escape':
hide();
return;
case 'i':
details_window.toggle()
}
console.log(e.key)
};
onMount(openPath)
</script>
<svelte:window on:keydown={keydown}/>
<div bind:this={file_viewer} class="file_viewer">
<div bind:this={header_bar} class="file_viewer_headerbar highlight_1">
<button on:click={toolbar_toggle} class="button_toggle_toolbar" class:button_highlight={toolbar_visible}>
<i class="icon">menu</i>
</button>
<a href="/" id="button_home" class="button button_home"><i class="icon">home</i></a>
<div class="file_viewer_headerbar_title">
<div>
{#if currentNode.parents.length > 0}
{currentNode.parents[currentNode.parents.length-1].path}
{/if}
/{currentNode.base.name}
</div>
</div>
</div>
<div class="list_navigator"></div>
<div class="file_viewer_window">
<div class="toolbar" class:toolbar_visible><div><div>
<div class="toolbar_label">Views</div>
<div class="toolbar_statistic">{formatThousands(file.views)}</div>
<div class="toolbar_label">Downloads</div>
<div class="toolbar_statistic">{formatThousands(file.downloads)}</div>
<div class="toolbar_label">Size</div>
<div class="toolbar_statistic">{formatDataVolume(file.size)}</div>
<button on:click={download} class="toolbar_button button_full_width">
<i class="icon">save</i> Download
</button>
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">save</i> DL all files
</button>
<button id="btn_copy" class="toolbar_button button_full_width">
<i class="icon">content_copy</i> <u>C</u>opy Link
</button>
<button on:click={sharebar.toggle} class="toolbar_button button_full_width" class:button_highlight={sharebar_visible}>
<i class="icon">share</i> Share
</button>
<button on:click={details.toggle} class="toolbar_button button_full_width" class:button_highlight={details_visible}>
<i class="icon">help</i> Deta<u>i</u>ls
</button>
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">edit</i> <u>E</u>dit
</button>
</div></div></div>
<Sharebar bind:this={sharebar}></Sharebar>
<div bind:this={preview} class="file_viewer_file_preview" class:toolbar_visible>
{#if loading}
<div class="center" style="width: 128px; height: 128px;">
<Spinner></Spinner>
</div>
{:else if viewer_type === "dir"}
<Directory bind:this={preview} node={currentNode} on:navigate={e => {navigate(e.detail)}}></Directory>
{/if}
</div>
</div>
<!-- This frame will load the download URL when a download button is pressed -->
<iframe title="Frame for downloading files" style="display: none; width: 1px; height: 1px;"></iframe>
<Modal bind:this={details} title="Details" width="600px">
<table style="min-width: 100%;">
<tr><td colspan="2"><h3>Node details</h3></td></tr>
<tr><td>Name</td><td>{currentNode.base.name}</td></tr>
<tr><td>Path</td><td>{currentNode.base.path}</td></tr>
<tr><td>Type</td><td>{currentNode.base.type}</td></tr>
<tr><td>Date created</td><td>{formatDate(currentNode.base.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(currentNode.base.date_modified, true, true, true)}</td></tr>
{#if currentNode.base.type === "file"}
<tr><td>File type</td><td>{currentNode.base.file_type}</td></tr>
<tr><td>File size</td><td>{formatDataVolume(currentNode.base.file_size)}</td></tr>
{/if}
<tr><td colspan="2"><h3>Bucket details</h3></td></tr>
<tr><td>ID</td><td>{currentNode.bucket.id}</td></tr>
<tr><td>Name</td><td>{currentNode.bucket.name}</td></tr>
<tr><td>Date created</td><td>{formatDate(currentNode.bucket.date_created, true, true, true)}</td></tr>
<tr><td>Date modified</td><td>{formatDate(currentNode.bucket.date_modified, true, true, true)}</td></tr>
</table>
</Modal>
</div>
<style>
/* Viewer container */
.file_viewer {
position: absolute;
display: flex;
flex-direction: column;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
/* Headerbar (row 1) */
.file_viewer > .file_viewer_headerbar {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
text-align: left;
z-index: 10;
box-shadow: none;
}
/* Headerbar components */
.file_viewer > .file_viewer_headerbar > * {
flex-grow: 0;
flex-shrink: 0;
margin-left: 6px;
margin-right: 6px;
display: inline;
}
.file_viewer > .file_viewer_headerbar > .file_viewer_headerbar_title {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: column;
overflow: hidden;
line-height: 1.2em; /* When the page is a list there will be two lines. Dont's want to stretch the container*/
white-space: nowrap;
text-overflow: ellipsis;
justify-content: center;
}
.button_home::after {
content: "pixeldrain";
}
@media (max-width: 600px) {
.button_home::after {
content: "pd";
}
}
/* List Navigator (row 2) */
.file_viewer > .list_navigator {
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: none; /* Becomes visible if the page is a list */
width: 100%;
background-color: var(--layer_1_color);
text-align: center;
line-height: 1em;
overflow-x: auto;
overflow-y: hidden;
z-index: 50;
white-space: nowrap;
}
/* .file_viewer > .list_navigator > .list_item{
height: 2.6em !important;
width: 220px !important;
} */
/* File preview area (row 3) */
.file_viewer > .file_viewer_window {
flex-grow: 1;
flex-shrink: 1;
position: relative;
display: inline-block;
width: auto;
height: auto;
margin: 0;
z-index: 9;
}
.file_viewer > .file_viewer_window > .file_viewer_file_preview {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: inline-block;
min-height: 100px;
min-width: 100px;
text-align: center;
vertical-align: middle;
transition: left 0.5s;
overflow: hidden;
box-shadow: inset 2px 2px 8px var(--shadow_color);
}
.file_viewer > .file_viewer_window > .file_viewer_file_preview > .center{
position: relative;
display: block;
margin: auto;
max-width: 100%;
max-height: 100%;
top: 50%;
transform: translateY(-50%);
}
/* Toolbar */
.toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
background-color: var(--layer_1_color);
left: -8em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.5s;
}
.toolbar.toolbar_visible { left: 0; }
.file_viewer > .file_viewer_window > .file_viewer_file_preview.toolbar_visible { left: 8em; }
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
.toolbar > div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: -30px;
overflow-y: scroll;
overflow-x: hidden;
}
.toolbar > div > div {
position: absolute;
left: 0;
top: 0;
width: 8em;
height: auto;
text-align: center;
}
.toolbar_button{
text-align: left;
}
.toolbar_label {
text-align: left;
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
margin-top: 0.5em;
}
.toolbar_statistic {
text-align: center;
}
</style>

45
svelte/src/filesystem/Sharebar.svelte Normal file
View File

@@ -0,0 +1,45 @@
<script>
let sharebar
export let visible = false
export const setVisible = (v) => { visible = v }
export const toggle = () => { setVisible(!visible) }
</script>
<div bind:this={sharebar} class="sharebar" class:visible>
Share on:<br/>
<button class="sharebar-button button_full_width" onclick="window.open('mailto:please@set.address?subject=File%20on%20pixeldrain&body=' + window.location.href);">
E-Mail
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://www.reddit.com/submit?url=' + window.location.href);">
Reddit
</button>
<button class="sharebar-button button_full_width" onclick="window.open('https://twitter.com/share?url=' + window.location.href);">
Twitter
</button>
<button class="sharebar-button button_full_width" onclick="window.open('http://www.facebook.com/sharer.php?u=' + window.location.href);">
Facebook
</button>
<button class="sharebar-button button_full_width" onclick="window.open('http://www.tumblr.com/share/link?url=' + window.location.href);">
Tumblr
</button>
</div>
<style>
.sharebar{
position: absolute;
width: 7em;
left: -8em;
bottom: 0;
top: 0;
overflow-y: scroll;
overflow-x: hidden;
float: left;
background-color: var(--layer_1_color);
box-shadow: inset 1px 1px var(--layer_1_shadow) var(--shadow_color);
text-align: center;
z-index: 48;
overflow: hidden;
transition: left 0.5s;
}
.visible { left: 8em; }
</style>

112
svelte/src/filesystem/Toolbar.svelte Normal file
View File

@@ -0,0 +1,112 @@
<script>
import { createEventDispatcher } from 'svelte'
import { formatDataVolume, formatThousands } from '../util/Formatting.svelte'
let dispatch = createEventDispatcher()
let toolbar
export let file
export let sharebar
export let visible = false
export const setVisible = (v) => {
visible = v
if (!visible) {
sharebar.setVisible(false)
}
}
export const toggle = () => { setVisible(!visible) }
</script>
<div bind:this={toolbar} class="toolbar" class:visible><div><div>
<div class="label">Views</div>
<div class="statistic">{formatThousands(file.views)}</div>
<div class="label">Downloads</div>
<div class="statistic">{formatThousands(file.downloads)}</div>
<div class="label">Size</div>
<div class="statistic">{formatDataVolume(file.size)}</div>
<button on:click={()=>{dispatch("download")}} class="toolbar_button button_full_width">
<i class="icon">save</i>
<span>Download</span>
</button>
<button id="btn_download_list" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">save</i>
<span>DL all files</span>
</button>
<button id="btn_copy" class="toolbar_button button_full_width">
<i class="icon">content_copy</i>
<span><u>C</u>opy Link</span>
</button>
<button on:click={sharebar.toggle} class="toolbar_button button_full_width">
<i class="icon">share</i>
<span>Share</span>
</button>
<button id="btn_shuffle" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">shuffle</i>
<span>Shuffle &#x2610;</span>
</button>
<button on:click={()=>{dispatch("details")}} class="toolbar_button button_full_width">
<i class="icon">help</i>
<span>Deta<u>i</u>ls</span>
</button>
<button id="btn_edit" class="toolbar_button button_full_width" style="display: none;">
<i class="icon">edit</i>
<span><u>E</u>dit</span>
</button>
</div></div></div>
<style>
.toolbar {
position: absolute;
width: 8em;
z-index: 49;
overflow: hidden;
float: left;
background-color: var(--layer_1_color);
left: -9em;
bottom: 0;
top: 0;
padding: 0;
text-align: left;
transition: left 0.5s;
}
.visible { left: 0; }
/* Workaround to hide the scrollbar in non webkit browsers, it's really ugly' */
.toolbar > div {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: -30px;
overflow-y: scroll;
overflow-x: hidden;
}
.toolbar > div > div {
position: absolute;
left: 0;
top: 0;
width: 8em;
height: auto;
text-align: center;
}
.toolbar_button{
text-align: left;
}
.toolbar_button > span {
vertical-align: middle;
}
.label {
text-align: left;
padding-left: 10px;
font-size: 0.8em;
line-height: 0.7em;
margin-top: 0.5em;
}
.statistic {
text-align: center;
}
</style>

127
svelte/src/filesystem/viewers/Directory.svelte Normal file
View File

@@ -0,0 +1,127 @@
<script>
import { createEventDispatcher } from 'svelte'
let dispatch = createEventDispatcher()
export let node;
const navigate_to = (path) => {
dispatch("navigate", path)
}
const navigate_up = () => {
if (node.parents.length !== 0) {
navigate_to(node.parents[node.parents.length-1].path)
}
}
const node_icon = node => {
if (node.type === "dir") {
return "/res/img/mime/folder.png"
}
switch (node.file_type) {
case "image/gif":
return "/res/img/mime/image-gif.png"
case "image/png", "image/apng":
return "/res/img/mime/image-png.png"
case "image/jpeg":
return "/res/img/mime/image-jpeg.png"
case "application/pdf":
return "/res/img/mime/pdf.png"
}
if (node.file_type.startsWith("audio/")) {
return "/res/img/mime/audio.png"
} else if (node.file_type.startsWith("video/")) {
return "/res/img/mime/video.png"
} else if (node.file_type.startsWith("text/")) {
return "/res/img/mime/text.png"
} else if (node.file_type.startsWith("image/")) {
return "/res/img/mime/image-png.png"
} else if (node.file_type.startsWith("application/")) {
return "/res/img/mime/archive.png"
}
return "/res/img/mime/empty.png"
}
</script>
<div class="container">
<div class="toolbar">
<button on:click={navigate_up}><i class="icon">arrow_upward</i> up</button>
</div>
<br/>
<div class="directory">
{#if Array.isArray(node.base.children)}
{#each node.base.children as child}
<div on:click={navigate_to(child.path)} class="node">
<img src={node_icon(child)} alt="icon"/>
<div>{child.name}</div>
</div>
{/each}
{/if}
</div>
</div>
<style>
.container {
height: 100%;
width: 100%;
padding: 0;
overflow-y: auto;
text-align: center;
}
.toolbar {
position: relative;
display: inline-block;
max-width: 800px;
width: 100%;
margin: 20px 0 0 0;
box-sizing: border-box;
}
.directory {
position: relative;
display: inline-block;
max-width: 800px;
width: 100%;
margin: 20px 0 40px 0;
text-align: left;
background-color: var(--layer_2_color);
box-shadow: 1px 1px var(--layer_2_shadow) var(--shadow_color);
box-sizing: border-box;
}
.node {
position: relative;
height: 40px;
overflow: hidden;
margin: 4px;
padding: 4px;
box-sizing: border-box;
cursor: pointer;
}
.node:hover:not(.node_selected) {
background-color: var(--input_color_dark);
color: var(--input_text_color);
text-decoration: none;
}
/* .node_selected {
background-color: var(--highlight_color);
color: var(--highlight_text_color);
} */
.node > div {
height: 100%;
overflow: hidden;
padding: 0;
line-height: 32px;
box-sizing: border-box;
display: inline-block;
text-overflow: ellipsis;
white-space: nowrap;
}
.node > img {
max-height: 100%;
margin-right: 6px;
width: auto;
min-width: auto;
float: left;
display: block;
}
</style>

10
svelte/src/modal.js Normal file
View File

@@ -0,0 +1,10 @@
import App from './modal/App.svelte';
const app = new App({
target: document.body,
props: {
name: 'world'
}
});
export default app;

45
svelte/src/modal/App.svelte Normal file
View File

@@ -0,0 +1,45 @@
<script>
import Modal from '../util/Modal.svelte';
let modal1;
let modal2;
let modal3;
</script>
<button on:click={modal1.show}>
show modal
</button>
<br/>
<Modal bind:this={modal3} title="Third modal" width="700px">
<img src="https://pixeldrain.com/res/img/header_orbitron_wide.png" alt="logo" style="max-width: 100%;"/>
</Modal>
<Modal bind:this={modal2} title="Wat!" width="1000px">
<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li><button on:click={modal3.show}>third modal</button></li>
<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
<li>of or relating to a statistical mode</li>
</ol>
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
</Modal>
<Modal bind:this={modal1} title="Hello!">
<ol class="definition-list">
<li>of or relating to modality in logic</li>
<li>containing provisions as to the mode of procedure or the manner of taking effect —used of a contract or legacy</li>
<li>of or relating to a musical mode</li>
<li>of or relating to structure as opposed to substance</li>
<li>of, relating to, or constituting a grammatical form or category characteristically indicating predication</li>
<li>of or relating to a statistical mode</li>
</ol>
<a href="https://www.merriam-webster.com/dictionary/modal">merriam-webster.com</a>
<br/>
<button on:click={modal2.show}>show modal</button>
</Modal>

61
svelte/src/util/Formatting.svelte Normal file
View File

@@ -0,0 +1,61 @@
<script context="module">
export const formatNumber = (amt, precision) => {
if (precision < 3) { precision = 3; }
if (amt >= 1e6) {
return (amt/1e6).toPrecision(precision) + "M";
} else if (amt >= 1e3) {
return (amt/1e3).toPrecision(precision) + "k";
}
return amt
}
export const formatThousands = (x) => {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ");
}
export const formatDataVolume = (amt, precision) => {
if (precision < 3) { precision = 3; }
if (amt >= 1e18) {
return (amt/1e18).toPrecision(precision) + " EB";
}else if (amt >= 1e15) {
return (amt/1e15).toPrecision(precision) + " PB";
}else if (amt >= 1e12) {
return (amt/1e12).toPrecision(precision) + " TB";
} else if (amt >= 1e9) {
return (amt/1e9).toPrecision(precision) + " GB";
} else if (amt >= 1e6) {
return (amt/1e6).toPrecision(precision) + " MB";
} else if (amt >= 1e3) {
return (amt/1e3).toPrecision(precision) + " kB";
}
return amt + " B"
}
const second = 1000
const minute = second*60
const hour = minute*60
const day = hour*24
export const formatDuration = (ms) => {
let res = ""
if (ms >= day) { res += Math.floor(ms/day) + "d " }
if (ms >= hour) { res += Math.floor((ms%day)/hour) + "h " }
if (ms >= minute) { res += Math.floor((ms%hour)/minute) + "m " }
return res + ((ms%minute)/second).toFixed(3) + "s"
}
export const formatDate = (date, hours, minutes, seconds) => {
if (!(date instanceof Date)) {
date = new Date(date)
}
let dateStr = date.getFullYear()
+"-"+("00"+(date.getMonth()+1)).slice(-2)
+"-"+("00"+date.getDate()).slice(-2)
if (hours) { dateStr += " "+("00"+date.getHours()).slice(-2) }
if (minutes) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
if (seconds) { dateStr += ":"+("00"+date.getMinutes()).slice(-2) }
return dateStr
}
</script>

117
svelte/src/util/Modal.svelte Normal file
View File

@@ -0,0 +1,117 @@
<script context="module">
// This makes sure new modals always show up on top of older modals. It is
// incremented every time a modal is shown
let global_index = 10000;
</script>
<script>
import { createEventDispatcher } from 'svelte';
import { fade } from 'svelte/transition';
export let title = "";
export let width = "800px";
export let height = "auto";
let visible = false;
const load_bg = background => {
background.style.zIndex = global_index.valueOf();
global_index++;
}
const load_modal = modal => {
modal.style.width = width;
modal.style.height = height;
}
const dispatch = createEventDispatcher();
export const show = () => { visible = true; dispatch("shown"); }
export const hide = () => { visible = false; dispatch("hidden"); }
export const toggle = () => {
if (visible) {
hide()
} else {
show()
}
}
const keydown = e => {
if (e.key === 'Escape') {
hide();
return;
}
};
</script>
<svelte:window on:keydown={keydown}/>
{#if visible}
<div class="background" use:load_bg on:click={hide} transition:fade={{duration: 200}}>
<div class="window" use:load_modal on:click|stopPropagation role="dialog" aria-modal="true">
<div class="header highlight_1">
<div class="title">{title}</div>
<button class="button_close button_red" on:click={hide}>
<i class="icon">close</i>
</button>
</div>
<div class="body">
<slot></slot>
</div>
</div>
</div>
{/if}
<style>
.background {
position: fixed;
text-align: center;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.window {
position: absolute;
z-index: inherit;
display: flex;
flex-direction: column;
background-color: var(--layer_2_color);
max-height: 100%;
max-width: 100%;
margin: 0 auto;
top: 20%;
left: 50%;
transform: translate(-50%, -20%);
padding: 0;
box-sizing: border-box;
text-align: left;
box-shadow: var(--shadow_color) 0px 0px 50px;
}
.header {
flex-grow: 0;
flex-shrink: 0;
display: flex;
flex-direction: row;
padding: 1px;
}
.title {
flex-grow: 1;
flex-shrink: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 1.2em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.button_close {
flex-grow: 0;
flex-shrink: 0;
}
.body {
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
padding: 10px;
}
</style>

39
svelte/src/util/Spinner.svelte Normal file
View File

@@ -0,0 +1,39 @@
<svg version="1.1"
class="svg_spinner"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 80 80"
xml:space="preserve">
<path
d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z">
<animateTransform
attributeType="xml"
attributeName="transform"
type="rotate"
from="0 40 40"
to="360 40 40"
dur="0.6s"
repeatCount="indefinite"/>
</path>
</svg>
<style>
svg {
color: var(--highlight_color);
fill: currentColor;
}
</style>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB