kn-cli 1.0.43 → 1.0.45

package/templates/template_admin/public/src/assets/iconfont/iconfont.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+  <font id="iconfont" horiz-adv-x="191.87258461178124">
+    <font-face font-family="iconfont"
+      units-per-em="128" ascent="128"
+      descent="0" />
+    <missing-glyph horiz-adv-x="0" />
+    <glyph glyph-name="arrowBack"
+      unicode="&#xE001;"
+      horiz-adv-x="128" d="M39.955 63.998L81.957 105.999L87.613 100.343L45.612 58.34zM45.652 69.692L88.149 27.196L82.492 21.539L39.995 64.036z" />
+    <glyph glyph-name="check"
+      unicode="&#xE002;"
+      horiz-adv-x="128" d="M51.382857125 40.68571425C53.4034285 37.8514285 57.61828575 37.8514285 59.648 40.68571425L93.348571375 87.40571425A1.28 1.28 0 0 1 92.30628575 89.444571375H84.8A5.092571375 5.092571375 0 0 1 80.65828575 87.31428575L55.515428625 52.43428575L44.132571375 68.24228575A5.12 5.12 0 0 1 39.98171425 70.363428625H32.484571375A1.28 1.28 0 0 1 31.44228575 68.33371425L51.37371425 40.68571425zM122.88 128H5.12A5.12 5.12 0 0 1 0 122.88V5.12C0 2.28571425 2.28571425 0 5.12 0H122.88C125.71428575 0 128 2.28571425 128 5.12V122.88A5.12 5.12 0 0 1 122.88 128zM116.48 11.52H11.52V116.48H116.48V11.52z" />
+    <glyph glyph-name="close"
+      unicode="&#xE003;"
+      horiz-adv-x="128" d="M74.56591125 63.999946625L127.611200375 125.42922875C128.496533 126.453227875 127.749866875 127.99989325 126.373868 127.999893375H110.2458815A3.338663875 3.338663875 0 0 1 107.76055025 126.87989425L64.00592 76.213269875L20.240623125 126.87989425A3.274664 3.274664 0 0 1 17.755291875 127.999893375H1.627305375C0.240639875 127.999893375 -0.506026125 126.453228 0.389973 125.42922875L53.4565955 63.999946625L0.389973 2.5706645C-0.495359625 1.546665375 0.2513065 0 1.627305375 0H17.755291875C18.715291125 0 19.611290375 0.415999625 20.240623125 1.119999125L64.00592 51.7866235L107.771216875 1.119999125A3.274664 3.274664 0 0 1 110.256548125 0H126.384534625C127.771200125 0 128.517866125 1.546665375 127.621867 2.5706645L74.5552445 63.999946625z" />
+    <glyph glyph-name="down"
+      unicode="&#xE004;"
+      horiz-adv-x="191.87258461178124" d="M189.9647490035717 128H171.0226685809696C169.7427983176176 128 168.5269214986842 127.36005675 167.758999415672 126.35214625L95.9902723763624 28.4568345L24.2215453370529 126.35214625A4.0635882205157 4.063639375 0 0 1 20.9738744703607 128H2.0317940477586C0.3839610415061 128 -0.5759416247583 126.14416475 0.3839610415061 124.832281125L89.4309370735613 3.3070665A8.1111780174276 8.111280125 0 0 1 102.5016125333505 3.3070665L191.580585287615 124.832281125A1.9837989019456 1.983823875 0 0 1 189.9807474271755 128z" />
+    <glyph glyph-name="image"
+      unicode="&#xE005;"
+      horiz-adv-x="170.63111851697565" d="M164.5781985954392 127.998613375H6.0800812704923A5.9520795555871 5.951866125 0 0 1 0 122.185410875V5.814695875C0 2.6041015 2.7200362854808 0.001493375 6.0907480279826 0.00149325H164.5888653529294A5.9520795555871 5.951866125 0 0 1 170.679613380912 5.814695875V122.185410875A5.9520795555871 5.951866125 0 0 1 164.5781985954392 127.998613375zM156.9514299885937 13.089198875H13.7175166348281V20.342369L40.0965356627626 50.219030125L68.6835842415614 17.8570915L113.164178483573 68.181292625L156.9514299885937 18.614407875V13.089198875zM156.9514299885937 36.694001L114.3268606752104 84.948915375A1.5573540938434 1.55729825 0 0 1 112.001496166931 84.948915375L68.6942509990517 35.926018375L41.2592178544 66.96532A1.5573540938434 1.55729825 0 0 1 38.9338534711252 66.96532L13.7175166348281 38.421962125V114.900241375H156.9514299885937V36.694001zM45.7179441110941 74.18649075C54.9767344892281 74.18649075 62.4755012561638 81.343663 62.4755012561638 90.18613075C62.4755012561638 99.017932 54.9767343642236 106.18577075 45.7179441110941 106.185770875S28.9497200835296 99.017932125 28.9497200835296 90.18613075C28.9497200835296 81.343663 36.4591537329601 74.18649075 45.7179441110941 74.18649075zM45.7179441110941 95.274016375C48.6726503114049 95.274016375 51.0513487321399 93.0020675 51.0513486071354 90.18613075A5.2054029061406 5.20521625 0 0 0 45.7179441110941 85.087578875A5.2054029061406 5.20521625 0 0 0 40.3845394900483 90.18613075C40.3845394900483 93.002067375 42.7632379107832 95.27401625 45.7179441110941 95.274016375z" />
+    <glyph glyph-name="play"
+      unicode="&#xE006;"
+      horiz-adv-x="128" d="M52.84571425 37.504L84.75428575 62.57371425C85.6685715 63.296 85.6685715 64.676571375 84.75428575 65.408L52.84571425 90.496A1.81028575 1.81028575 0 0 1 49.92 89.088V38.93028575C49.92 37.421714375 51.657142875 36.5805715 52.84571425 37.504zM122.88 128H5.12A5.12 5.12 0 0 1 0 122.88V5.12C0 2.28571425 2.28571425 0 5.12 0H122.88C125.71428575 0 128 2.28571425 128 5.12V122.88A5.12 5.12 0 0 1 122.88 128zM116.48 11.52H11.52V116.48H116.48V11.52z" />
+    <glyph glyph-name="refresh"
+      unicode="&#xE007;"
+      horiz-adv-x="128" d="M85.504 77.568Q83.328 78.592 83.52 80.32T84.992 83.072Q85.376 83.328 87.488 85.056T92.672 89.216Q87.296 95.36 79.872 98.88T63.744 102.4Q55.68 102.4 48.64 99.392T36.352 91.136T28.096 78.848T25.088 63.744Q25.088 55.808 28.096 48.768T36.352 36.48T48.64 28.224T63.744 25.216Q70.4 25.216 76.352 27.328T87.232 33.28T95.68 42.304T100.864 53.632Q101.76 56.576 104.192 58.496T109.952 60.416Q113.92 60.416 116.672 57.6T119.424 50.944Q119.424 49.152 118.784 47.488Q116.096 38.528 110.848 30.976T98.368 17.984T82.304 9.472T63.744 6.4Q51.84 6.4 41.344 10.88T23.104 23.168T10.816 41.408T6.272 63.744T10.816 86.144T23.104 104.384T41.344 116.672T63.744 121.216Q76.928 121.216 88.192 115.776T107.392 100.992Q110.336 103.168 112.32 104.768T114.816 106.752Q115.584 107.392 116.48 107.712T118.144 107.712T119.488 106.368T120.32 103.296Q120.448 102.144 120.576 99.392T120.832 92.992T120.96 85.44T120.832 78.08Q120.704 73.728 118.784 71.808Q117.76 70.784 115.712 70.656T111.36 71.04Q107.904 71.808 103.744 72.704T95.808 74.56T89.152 76.352T85.504 77.568z" />
+    <glyph glyph-name="warn"
+      unicode="&#xE008;"
+      horiz-adv-x="128" d="M64 128A64 64 0 1 1 128 64A64 64 0 0 1 64 128zM64 25.6A6.4 6.4 0 1 0 70.4 32A6.4 6.4 0 0 0 64 25.6zM70.4 44.8H57.6V102.4H70.4z" />
+  </font>
+</defs>
+</svg>

package/templates/template_admin/public/src/assets/images/loading.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8888888888888888s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(40 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.7777777777777778s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(80 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5555555555555556s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(160 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4444444444444444s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(200 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.2222222222222222s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(280 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.1111111111111111s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(320 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#94908d">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>

package/templates/template_admin/public/src/components/Auth/index.jsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import ProviderApp from '@/provider/app';
+import { useNavigate } from 'react-router-dom';
+import {useLoading} from '@/hooks';
+
+export const AuthShow=(props)=>{
+  const {name} = props;
+  const app = ProviderApp.useContainer();
+  if(app?.user?.authorities?.includes(name)){
+    return props.children;
+  }
+  return <></>
+}
+
+export const AuthLogin=(props)=>{
+  const navigate = useNavigate();
+  const [pass,setPass] = useState(false)
+  const app = ProviderApp.useContainer();
+  const loading = useLoading();
+
+  const check=async ()=>{
+    loading.setLoading(true);
+    console.log(`[Auth]检查用户登录态`)
+    const req =await app.isLogin();
+    loading.setLoading(false);
+    if(req){
+      console.log(`[Auth]检查用户登录态成功`)
+      setPass(true);
+    }else{
+      console.log(`[Auth]检查用户登录态失败`)
+      setPass(false);
+      navigate('/login');
+    }
+  }
+  useEffect(check,[]);
+
+  if(pass){
+    return props.children;
+  }
+  return <>检查登录态中...</>
+}
+
+
+export default {AuthShow,AuthLogin};

package/templates/template_admin/public/src/components/Header/index.jsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import IconFont from '../IconFont';
+import styles from './index.less';
+
+const Header=(props)=>{
+  const {
+    visible=true,
+    className='',
+    title='标题',
+    subTitle='',
+    leftLabel='',
+    rightLabel='',
+    left=<IconFont className={styles.leftIcon} icon='arrowBack' />,
+    right='',
+    syncDocumentTitle=false
+  } = props;
+
+  // 同步更新网页标题
+  useEffect(()=>{
+    if(syncDocumentTitle){
+      document.title= title;
+    }
+  },[title])
+  const onLeft=()=>{
+    window.history.back();
+  }
+  const onLeftLabel=()=>{
+    if(props.onLeftLabel){props.onLeftLabel()}
+  }
+  const onRight=()=>{
+    if(props.onRight){props.onRight()}
+  }
+  const onRightLabel=()=>{
+    if(props.onRightLabel){props.onRightLabel()}
+  }
+  const onTitle=()=>{
+    if(props.onTitle){props.onTitle()}
+  }
+  return (
+    <section className={`${styles.header} ${className}`} data-visible={visible}>
+      <hgroup className={styles.group}>
+        {left&&(<section className={styles.left} onClick={onLeft}>{left}</section>)}
+        {leftLabel&&<span className={styles.leftLabel} onClick={onLeftLabel}>{leftLabel}</span>}
+      </hgroup>
+      <section className={styles.center}>
+        {title&&<span onClick={onTitle}>{title}</span>}
+        {subTitle&&<span>{subTitle}</span>}
+      </section>
+      <hgroup className={styles.group}>
+        {rightLabel&&<span className={styles.rightLabel} onClick={onRightLabel}>{rightLabel}</span>}
+        {right&&(<section className={styles.right} onClick={onRight}>{right}</section>)}
+      </hgroup>
+      
+    </section>
+  )
+}
+export default Header;

package/templates/template_admin/public/src/components/Header/index.less

@@ -0,0 +1,57 @@
+@import '~@/_variable.less';
+
+
+.header{
+  z-index: 1;
+  height:var(--height-header);
+  background-color: white;
+  width:100%;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 0 2px 0 #ccc;
+  padding: 0 var(--padding-default);
+  &[data-visible='false']{
+    display: none;
+  }
+  .group{
+    display: flex;
+    align-items: center;
+    height:100%;
+    min-width: 1px;
+  }
+  .right,
+  .left{
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    .rightIcon,
+    .leftIcon{
+      margin-top: 6px;
+    }
+  }
+  .rightLabel,
+  .leftLabel{
+    &:not(:first-child){
+      margin-left:var(--padding-small)
+    }
+  }
+
+  .center{
+    flex:1;
+    height:100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color:var(--color-text);
+    span:nth-child(1){
+      font-size: 16px;
+      color:inherit;
+    }
+    span:nth-child(2){
+      font-size: 12px;
+      color:inherit;
+    }
+  }
+}
+

package/templates/template_admin/public/src/components/IconFont/index.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+import styles from'./index.less';
+
+const IconFont=(props)=>{
+  const {icon,className,...others} = props;
+  return (
+    <span {...others} className={`iconfont icon-${icon} ${styles.iconBox} ${className||''}`} ></span>
+  )
+}
+export default IconFont;

package/templates/template_admin/public/src/components/IconFont/index.less

@@ -0,0 +1,5 @@
+
+
+.iconBox{
+  font-size:inherit;
+}

package/templates/template_admin/public/src/components/Layout/Basic/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import {Outlet} from 'react-router-dom';
+import {LayoutCenterBody} from '@/components/Layout';
+
+
+import styles from './index.less';
+
+
+const LayoutBasic=(props)=>{
+  const {className,nav="",topMenu=""} = props;
+  return ( 
+    <LayoutCenterBody layout='x-center'>
+      <section className={styles.wrap} >
+        {topMenu}
+        <section className={styles.content}>
+          {nav}
+          <section className={styles.body}>
+            <Outlet />
+          </section>
+        </section>
+      </section>
+    </LayoutCenterBody>
+  )
+}
+
+export default LayoutBasic;

package/templates/template_admin/public/src/components/Layout/Basic/index.less

@@ -0,0 +1,37 @@
+@import '~@/_variable.less';
+
+.wrap{
+  width:100%;
+  height:100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.content{
+  width:100%;
+  flex:1;
+  display: flex;
+  overflow: hidden;
+  .body{
+    overflow: auto;
+    background-color: var(--color-body-background);
+    flex:1;
+    height:100%;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+}
+.navBackground{
+  position: fixed;
+  left:0;
+  top:0;
+  background-color: rgba(0,0,0,.5);
+  width:100%;
+  height:100%;
+  z-index: var(--z-nav-mobile);
+}
+
+
+

package/templates/template_admin/public/src/components/Layout/CenterBody/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import styles from './index.less';
+
+
+const LayoutCenterBody=(props)=>{
+  const {className,layout='normal'} = props;
+
+  return ( 
+    <section data-layout={layout} className={ className?`${styles.contentBody} ${className}`:styles.contentBody  }>
+      {props.children}
+    </section>
+  )
+}
+export default LayoutCenterBody;

package/templates/template_admin/public/src/components/Layout/CenterBody/index.less

@@ -0,0 +1,30 @@
+@import '~@/_variable.less';
+
+
+.contentBody{
+  width:100%;
+  height:100%;
+  &[data-layout='xy-center']{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+  &[data-layout='x-center']{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  &[data-layout='y-center']{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+body[data-debug-layout]{
+  .contentBody{
+    border:1px solid red;
+  }
+}
+

package/templates/template_admin/public/src/components/Layout/Provider/index.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {Outlet} from 'react-router-dom';
+import ProviderApp from '@/provider/app';
+
+const LayoutProvider=(props)=>{
+  return ( 
+    <ProviderApp.Provider>
+      <Outlet />
+    </ProviderApp.Provider>
+  )
+}
+export default LayoutProvider;

package/templates/template_admin/public/src/components/Layout/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ProviderApp from '@/provider/app';
+
+import {Outlet} from 'react-router-dom';
+import { ConfigProvider } from 'antd';
+import LayoutBasic from './Basic';
+import LayoutCenterBody from './CenterBody';
+import zhCN from 'antd/lib/locale/zh_CN';
+
+import styles from './index.less';
+
+// 站点最基础的layout，用于控制一些全局环境变量
+const Layout = (props) => {
+  return (
+    <ProviderApp.Provider>
+        <ConfigProvider locale={zhCN}>
+          <section className={styles.layout} >
+            <Outlet />
+          </section>
+        </ConfigProvider>
+    </ProviderApp.Provider>
+  );
+};
+
+
+
+export { Layout,LayoutCenterBody,LayoutBasic };

package/templates/template_admin/public/src/components/Layout/index.less

@@ -0,0 +1,63 @@
+@import '~@/_variable.less';
+
+.layout {
+  width: 100%;
+  height:100%;
+  left:0;
+  top:0;
+  position: absolute;
+  margin: 0 auto;
+  z-index:0;
+  background:white;
+  display: flex;
+  justify-content: center;
+
+  .app-scroll-body-pull-load-box{
+    width:100%;
+    height:100%;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+    &::-webkit-scrollbar {
+      display: none; 
+    }
+  }
+  
+  .app-scroll-body-pull-load{
+    height:@pullLoadHeight+PX;
+    background:#F2F5FA;
+    width:100%;
+    color:#aaa;
+    z-index:1;
+
+    position: absolute;
+    left:0;
+    top:0;
+    transform: translate3d(0,-@pullLoadHeight+PX,0);
+
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    div,img{
+      // width:56*2+px;
+      max-height: 100%;
+    }
+
+  }
+  .app-scroll-body{
+    width:100%;
+    min-height:100%;
+  }
+
+}
+
+body[data-debug-layout]{
+  .layout .center{
+    border:4px solid #4366a0;
+  }
+}
+
+
+
+

package/templates/template_admin/public/src/components/Link/index.jsx

@@ -0,0 +1,24 @@
+import React  from 'react';
+import { openLink,jumpUrl } from '@/utils';
+import styles from './index.less';
+
+const Link=(props)=>{
+  const {children,className='',onClick,href='',target=''} = props;
+
+  const onLink=()=>{
+    if(href){
+      if(target=='_blank'){
+        openLink(href);
+        // window.open(href);
+      }else{
+        jumpUrl(href);
+      }
+      return;
+    }
+    if(onClick)onClick();
+  }
+  return (
+    <span onClick={onLink} className={`${styles.linkWrap} ${className}`}>{children}</span>
+  )
+}
+export default React.memo(Link);

package/templates/template_admin/public/src/components/Link/index.less

@@ -0,0 +1,11 @@
+@import '~@/_variable.less';
+
+
+.linkWrap{
+  color: var(--color-primary);
+  font-size: 14px;
+  &:hover{
+    color: var(--color-primary-hover);
+    cursor: pointer;
+  }
+}

package/templates/template_admin/public/src/components/Loading/index.jsx

@@ -0,0 +1,14 @@
+
+
+import React,{useMemo} from 'react';
+import styles from './index.less';
+styles;
+export const Loading=()=>{
+  return (
+    <div className="ldio-2oha7mxue8v">
+      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+    </div>
+  )
+}
+
+export default React.memo(Loading);

package/templates/template_admin/public/src/components/Loading/index.less

@@ -0,0 +1,85 @@
+
+:global{
+@color:#fff;
+@keyframes ldio-2oha7mxue8v {
+  0% { opacity: 1 }
+  100% { opacity: 0 }
+}
+.ldio-2oha7mxue8v div:local {
+  left:0px;
+  top:0px;
+  position: absolute;
+  animation: ldio-2oha7mxue8v linear 1s infinite;
+  background: @color;
+  width: 12px;
+  height: 24px;
+  border-radius: 6px / 12px;
+  transform-origin: 40px 40px;
+}
+.ldio-2oha7mxue8v div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -0.9166666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -0.8333333333333334s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.75s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.6666666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.5833333333333334s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.5s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.4166666666666667s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.3333333333333333s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.25s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.16666666666666666s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.08333333333333333s;
+  background: @color;
+}.ldio-2oha7mxue8v div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+  background: @color;
+}
+.loadingio-spinner-spinner-vviroavveu {
+  width: 200px;
+  height: 200px;
+  display: inline-block;
+  overflow: hidden;
+  background: transparent;
+}
+.ldio-2oha7mxue8v {
+  width: 80px;
+  height: 80px;
+  position: relative;
+  transform: translateZ(0) scale(1);
+  backface-visibility: hidden;
+  transform-origin: 0 0; /* see note above */
+}
+.ldio-2oha7mxue8v div { box-sizing: content-box; }
+/* generated by https://loading.io/ */
+}