react实现后台管理页面骨架布局加载效果代码
代码语言:html
所属分类:布局界面
代码描述:react实现后台管理页面骨架布局加载效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-size: 16px; } .example-icon { background-color: var(--color); width: var(--size); height: var(--size); display: inline-block; border-radius: 50%; } .example-skeleton { --size: 1rem; background-color: var(--color); width: calc(var(--size) * var(--chars)); height: calc(var(--size) * var(--lines)); margin-bottom: 0.75rem; display: inline-block; overflow: hidden; position: relative; animation: animate-skeleton 2048ms ease-in-out infinite; } .example-skeleton:last-child { margin-bottom: 0; } .example-skeleton:after { content: ""; width: 0; height: 100%; display: inline-block; opacity: 0; position: absolute; top: 0; left: 0; box-shadow: 0 0 2rem 0.75rem #ffffff; transform: skewX(-10deg); animation: animate-skeleton-shine 2048ms ease-in-out infinite; } @keyframes animate-skeleton { 50% { filter: brightness(105%); } } @keyframes animate-skeleton-shine { 0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 100% { left: 100%; opacity: 1; } } .example-offcanvas-container { width: 100vw; height: 100vh; display: flex; overflow: hidden; } .example-offcanvas-screen { width: calc(100vw - 3rem); display: flex; flex-direction: column; flex-grow: 1; flex-shrink: 0; overflow: hidden; box-shadow: 0 0 0.7rem 0.4rem rgba(0, 0, 0, 0.3); } .example-top-bar { background-color: #418eec; width: 100%; height: 3rem; display: flex; flex-wrap: nowrap; box-shadow: 0 0 0.7rem 0.4rem rgba(0, 0, 0, 0.3); transform: translateZ(1px); } .example-hamburger-menu { background-color: #1773e3; width: 3rem; height: 3rem; border: 0; outline: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; flex-shrink: 0; transition: background-color 64ms ease-out; } .example-hamburger-menu:hover { background-color: #1467cc; } .example-hamburger-menu:active { background-color: #125bb5; } .example-hamburger-menu.example-hamburger-menu-active > span:nth-child(1) { transform: translateY(0.45rem) rotate(-45deg); } .example-hamburger-menu.example-hamburger-menu-active > span:nth-child(2) { opacity: 0; } .example-hamburger-menu.example-hamburger-menu-active > span:nth-child(3) { transform: translateY(-0.45rem) rotate(45deg); } .example-hamburger-menu > span { background-color: #ffffff; width: 1.1em; height: 0.15rem; margin-bottom: 0.3rem; display: block; transition: transform 128ms ease-out 256ms, opacity 128ms ease-out 246ms; } .example-hamburger-menu > span:last-child { margin-bottom: 0; } .example-search-box { height: 100%; padding: 0 1rem; display: flex; align-items: center; } .example-search-input { background-color: #1773e3; width: 10rem; height: 2rem; padding: 0 0.5rem; border: 0; outline: 0; border-radius: 0; transition: background-color 64ms ease-out; } .example-search-input:focus { background-color: #f2f2f2; } .example-search-button { background-color: #343434; width: 2rem; height: 2rem; border: 0; outline: 0; display: flex; justify-content: center; align-items: center; border-radius: 0; transition: background-color 64ms ease-out; } .example-search-button:hover { background-color: #1b1b1b; } .example-search-button:active { background-color: #010101; } .example-search-button-icon { width: 16px; height: 16px; border: solid 3px #f2f2f2; display: flex; justify-content: center; align-items: center; box-sizing: border-box; border-radius: 50%; } .example-search-button-icon::after { content: ""; background-color: #f2f2f2; width: 3px; height: 7px; transform: rotate(-45deg) translateY(10px); } .example-top-bar-left-links, .example-top-bar-right-links { height: 3rem; display: flex; flex-wrap: nowrap; } .example-top-bar-right-links { margin-left: auto; } .example-top-bar-link { background-color: #418eec; width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; transition: background-color 64ms ease-out; } .example-top-bar-link:hover { background-color: #1773e3; } .example-side-bar { background-color: #303a45; width: 3rem; height: 100vh; display: flex; flex-direction: column; flex-wrap: nowrap; flex-shrink: 0; overflow: hidden; transition: width 512ms cubic-bezier(0.68, -0.55, 0.27, 1.55); } .example-side-bar.example-side-bar-expanded { width: 15rem; } .example-side-bar-title { background-color: #262d36; width: 100%; height: 3rem; display: flex; align-items: center; } .example-side-bar-title-icon, .example-side-bar-link-icon { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } .example-side-bar-title-text { margin-left: 0.5rem; display: flex; align-items: center; } .example-side-bar-list { padding: 0; margin: 0; list-style-type: none; } .example-side-bar-link { height: 3rem; display: flex; flex-shrink: 0; flex-wrap: nowrap; align-items: center; transition: background-color 32ms ease-out; } .example-side-bar-link:hover { background-color: #262d36; } .example-offcanvas-content { width: 100%; height: 100%; padding: 1rem; flex-shrink: 1; overflow: auto; box-sizing: border-box; } .example-breadcrumbs { background-color: #ffffff; padding: 0.75rem; margin: 0; display: flex; overflow: hidden; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); box-sizing: border-box; list-style-type: none; } .example-breadcrumbs > li { display: flex; align-items: center; } .example-breadcrumbs > li:not(:last-child)::after { content: "/"; display: inline-flex; padding: 0 0.75rem; } .example-breadcrumb-link { color: #2f2f2f; text-decoration: none; display: inline-flex; } .example-dashboard { margin-top: 1rem; display: flex; } .example-left-panel { width: 12rem; margin-right: 1rem; flex-shrink: 0; } .example-center-panel { width: 100%; min-width: 12rem; } .example-right-panel { width: 12rem; margin-left: 1rem; flex-shrink: 0; } .example-card { width: 100%; padding: 0.75rem; margin-bottom: 1rem; box-shadow: 0 0.2rem 0.4rem rgba(0, 0, 0, 0.2); box-sizing: border-box; } .example-card:last-child { margin-bottom: 0; } .example-card-list { padding: 0; display: flex; flex-direction: column; } .example-card-list-item { padding: 0.75rem; transition: background-color 64ms ease-out; } .example-card-list-item:hover { background-color: rgba(0, 0, 0, 0.01); } .example-card-list-item:not(:last-child) { border-bottom: solid 1px #f2f2f2; } </style> </head> <body > <div id="app"></div> <script type="module"> import React, { useState } from "https://cdn.skypack.dev/react@17.0.1"; import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1"; function ExampleSkeleton(props) { const size = props.size; const color = props.color; const chars = props.chars; const lines = props.lines; const width = props.width; return /*#__PURE__*/( React.createElement("div", { className: "example-skeleton", style: { "--size": size, "--color": color, "--chars": chars, "--lines": lines, "width": width } })); } function ExampleIcon(props) { const size = props.size; const color = props.color; return /*#__PURE__*/( React.createElement("i", { className: "example-icon", style: { "--size": size, "--color": color } })); } function ExampleTopBarLink() { return /*#__PURE__*/( React.createElement("a", { href: "#", className: "example-top-bar-link", onClick: () => false }, /*#__PURE__*/ React.createElement(ExampleIcon, { size: "24px", color: "#f2f2f2" }))); } function ExampleTopBar(props) { const hamburgerClick = props.hamburgerClick; const hamburgerActive = props.hamburgerActive; let hamburgerClassName = "example-hamburger-menu"; if (hamburgerActive) { hamburgerClassName += " example-hamburger-menu-active"; } return /*#__PURE__*/( React.createElement("nav", { className: "example-top-bar" }, /*#__PURE__*/ React.createElement("button", { className: hamburgerClassName, onClick: hamburgerClick }, /*#__PURE__*/ React.createElement("span", null), /*#__PURE__*/ React.createElement("span", null), /*#__PURE__*/ React.createElement("span", null)), /*#__PURE__*/ React.createElement("div", { className: "example-search-box" }, /*#__PURE__*.........完整代码请登录后点击上方下载按钮下载查看
网友评论0