moyin/fzu-product
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

style: 增强渲染动画

Browse Source
This commit is contained in:
camera-2018
2023-04-25 16:22:48 +08:00
parent 62b6b7877c
commit e7e068cea3
1 changed files with 13 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/RenderJupyterNotebook.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div ref="NotebookFragment" class="notebook-fragment"> <div ref="NotebookFragment" class="notebook-fragment">
<div ref="loading" id="loading"> <div ref="loading" id="loading">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" id="loadingsvg">
<g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2"> <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
<path stroke-dasharray="2 4" stroke-dashoffset="6" <path stroke-dasharray="2 4" stroke-dashoffset="6"
d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3"> d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3">
@@ -19,7 +19,7 @@
</path> </path>
</g> </g>
</svg> </svg>
本页面包含 Jupyter NoteBook , 正在渲染中... ... <div>本页面包含 Jupyter NoteBook , 正在渲染中... ...</div>
</div> </div>
</div> </div>
</template> </template>
@@ -44,5 +44,16 @@ onMounted(async () => {
#loading { #loading {
font-size: 1.5rem; font-size: 1.5rem;
text-align: center; text-align: center;
margin: 1rem auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
animation: rainbow 10s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite !important;
}
#loadingsvg {
width: 5rem;
height: 5rem;
} }
</style> </style>