d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 07:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Loading 动画

Browse Source
This commit is contained in:
tangly1024.com
2023-03-24 14:00:10 +08:00
parent 7a72f00a78
commit d996b83e9d
5 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
themes/example/LayoutBase.js
View File

@@ -7,6 +7,7 @@ import { Title } from './components/Title'
import { SideBar } from './components/SideBar'
import JumpToTopButton from './components/JumpToTopButton'
import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -15,6 +16,14 @@ import BLOG from '@/blog.config'
*/
const LayoutBase = props => {
const { children, meta } = props
const { onLoading } = useGlobal()
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
<div className='w-full h-screen flex justify-center items-center'>
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
</div>
</div>
return (
<div id='theme-example' className='dark:text-gray-300 bg-white dark:bg-black'>
<CommonHead meta={meta} />
@@ -31,7 +40,7 @@ const LayoutBase = props => {
<div className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + 'relative container mx-auto justify-center md:flex items-start py-8 px-2'}>
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '>{children}</div>
<div className='w-full max-w-3xl xl:px-14 lg:px-4 '> {onLoading ? LoadingCover : children}</div>
<SideBar {...props} />

17
themes/fukasawa/LayoutBase.js
View File

@@ -4,6 +4,7 @@ import AsideLeft from './components/AsideLeft'
import Live2D from '@/components/Live2D'
import BLOG from '@/blog.config'
import { isBrowser, loadExternalResource } from '@/lib/utils'
import { useGlobal } from '@/lib/global'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -20,17 +21,21 @@ import { isBrowser, loadExternalResource } from '@/lib/utils'
* @constructor
*/
const LayoutBase = (props) => {
const {
children,
headerSlot,
meta
} = props
const { children, headerSlot, meta } = props
const leftAreaSlot = <Live2D/>
if (isBrowser()) {
loadExternalResource('/css/theme-fukasawa.css', 'css')
}
const { onLoading } = useGlobal()
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
<div className='w-full h-screen flex justify-center items-center'>
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
</div>
</div>
return (<div id='theme-fukasawa' >
<CommonHead meta={meta} />
<TopNav {...props}/>
@@ -41,7 +46,7 @@ const LayoutBase = (props) => {
<main id='wrapper' className='relative flex w-full py-8 justify-center z-10'>
<div id='container-inner' className='2xl:max-w-6xl md:max-w-4xl w-full relative'>
<div> {headerSlot} </div>
<div>{children}</div>
<div> {onLoading ? LoadingCover : children} </div>
</div>
</main>

10
themes/medium/LayoutBase.js
View File

@@ -25,6 +25,13 @@ const LayoutBase = props => {
const { locale } = useGlobal()
const router = useRouter()
const [tocVisible, changeTocVisible] = useState(false)
const { onLoading } = useGlobal()
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
<div className='w-full h-screen flex justify-center items-center'>
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
</div>
</div>
return (
<ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
@@ -42,7 +49,8 @@ const LayoutBase = props => {
<div id='container-inner' className='px-7 max-w-5xl justify-center mx-auto min-h-screen'>
{slotTop}
{children}
{onLoading ? LoadingCover : children}
{/* 回顶按钮 */}
<div

13
themes/nobelium/LayoutBase.js
View File

@@ -4,6 +4,7 @@ import Nav from './components/Nav'
import { Footer } from './components/Footer'
import JumpToTopButton from './components/JumpToTopButton'
import Live2D from '@/components/Live2D'
import { useGlobal } from '@/lib/global'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -14,7 +15,13 @@ const LayoutBase = props => {
const { children, meta, post } = props
const fullWidth = post?.fullWidth ?? false
const { onLoading } = useGlobal()
const LoadingCover = <div id='cover-loading' className={`${onLoading ? 'z-50 opacity-50' : '-z-10 opacity-0'} pointer-events-none transition-all duration-300`}>
<div className='w-full h-screen flex justify-center items-center'>
<i className="fa-solid fa-spinner text-2xl text-black dark:text-white animate-spin"> </i>
</div>
</div>
return (
<div id='theme-nobelium' className='nobelium relative dark:text-gray-300 w-full bg-white dark:bg-black min-h-screen'>
<CommonHead meta={meta} />
@@ -22,11 +29,9 @@ const LayoutBase = props => {
{/* 顶部导航栏 */}
<Nav {...props} />
<main className={`relative m-auto flex-grow w-full transition-all ${
!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
}`}>
<main className={`relative m-auto flex-grow w-full transition-all ${!fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'}`}>
{children}
{onLoading ? LoadingCover : children}
</main>

4
themes/simple/LayoutBase.js
View File

@@ -47,12 +47,12 @@ const LayoutBase = props => {
<NavBar {...props} />
{/* 主体 */}
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
<div id='container-wrapper' className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full flex-1 flex items-start max-w-9/10 mx-auto pt-12'}>
<div id='container-inner ' className='w-full flex-grow'>
{onLoading ? LoadingCover : children}
</div>
<div className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
<div id='right-sidebar' className="hidden xl:block flex-none sticky top-8 w-96 border-l dark:border-gray-800 pl-12 border-gray-100">
<SideBar {...props} />
</div>