@neatui/css 1.0.2

package/list/list@a.scss

@@ -0,0 +1,62 @@
+$type: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
+
+[ui-list~='@a'] {
+  // 基础样式
+  & {
+    @include theme {
+      background-color: co(fore);
+      box-shadow:
+        inset 0 0.3rem 0 0 co(main),
+        inset 0 0 0 1px co(line);
+    }
+    border-radius: 0.2rem;
+
+    // 标题
+    & > *:first-child {
+      padding: 1rem 1rem 0.5rem 1rem;
+    }
+
+    // 列表
+    & > *:last-child {
+      padding: 0;
+
+      & > * {
+        @include theme {
+          border-bottom: 1px solid mix(co(line), co(fore), 53%);
+        }
+        padding: 1rem;
+
+        &:last-of-type {
+          border-bottom: 0;
+        }
+
+        & > * {
+          margin: 0;
+        }
+
+        // 列表内容标题
+        & > *:first-child {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        & > *:last-child {
+          font-size: 0.8em;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  // 主题颜色
+  @each $name in $type {
+    &[ui-list~='#{$name}'] {
+      @include theme {
+        // border-top: 0.3rem solid co($name);
+        box-shadow:
+          inset 0 0.3rem 0 0 co($name),
+          inset 0 0 0 1px co(line);
+      }
+    }
+  }
+}

package/list/list@b.scss

@@ -0,0 +1,83 @@
+$cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
+
+[ui-list~='@b'] {
+  // 容器
+  & {
+    position: relative;
+    padding-left: 0.5em;
+
+    // 连线
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1px;
+      height: 100%;
+      top: 0;
+      left: auto;
+      @include theme {
+        background: linear-gradient(0deg, rgba(co(line), 0) 0%, co(line) 3%);
+      }
+    }
+  }
+
+  // 子集
+  & > * {
+    & {
+      position: relative;
+      display: block;
+      padding-left: 1em;
+      border-radius: 0.25em;
+    }
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1.5em;
+      height: 1.5em;
+      border-radius: 1em;
+      left: 0;
+      top: -0.2em;
+      margin-left: -0.7em;
+      @include theme {
+        background-image: radial-gradient(at 50% 50%, co(fore) 37%, co(line) 39%, co(line) 47%, co(fore) 49%);
+      }
+    }
+
+    &::after {
+      position: absolute;
+      content: attr(time);
+      display: block;
+      width: 5em;
+      height: 1.5em;
+      line-height: 1.5em;
+      right: 100%;
+      margin-right: 1em;
+      top: 0.8em;
+      overflow: hidden;
+      text-align: right;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.active,
+    &:hover {
+      &::before {
+        @include theme {
+          background-image: radial-gradient(at 50% 50%, co(main) 20%, transparent 23%), radial-gradient(at 50% 50%, co(fore) 37%, co(main) 39%, co(main) 47%, co(fore) 49%);
+        }
+      }
+      &::after {
+        font-weight: bold;
+        @include theme {
+          color: co(main);
+        }
+      }
+    }
+
+    & > *:first-child {
+      line-height: 1;
+    }
+  }
+}

package/list/list@c.scss

@@ -0,0 +1,89 @@
+$cos: 'main', 'vice', 'read', 'info', 'well', 'warn', 'risk';
+
+[ui-list~='@b'] {
+  // 容器
+  & {
+    position: relative;
+    padding-left: 0.5em;
+
+    // 连线
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1px;
+      height: 100%;
+      top: 0;
+      left: auto;
+      @include theme {
+        background: linear-gradient(0deg, rgba(co(line), 0) 0%, co(line) 3%);
+      }
+    }
+  }
+
+  // 子集
+  & > * {
+    & {
+      position: relative;
+      display: block;
+      padding: 1em;
+      border-radius: 0.25em;
+      margin-bottom: 0.5em;
+
+      p {
+        margin-bottom: 0.5em;
+      }
+    }
+
+    &::before {
+      position: absolute;
+      display: block;
+      content: '';
+      width: 1.5em;
+      height: 1.5em;
+      border-radius: 1em;
+      left: 0;
+      top: 0.8em;
+      margin-left: -0.7em;
+      @include theme {
+        background-image: radial-gradient(at 50% 50%, co(fore) 37%, co(line) 39%, co(line) 47%, co(fore) 49%);
+      }
+    }
+
+    &::after {
+      position: absolute;
+      content: attr(time);
+      display: block;
+      width: 5em;
+      height: 1.5em;
+      line-height: 1.5em;
+      right: 100%;
+      margin-right: 1em;
+      top: 0.8em;
+      overflow: hidden;
+      text-align: right;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &.active,
+    &:hover {
+      &::before {
+        @include theme {
+          background-image: radial-gradient(at 50% 50%, co(main) 20%, transparent 23%), radial-gradient(at 50% 50%, co(fore) 37%, co(main) 39%, co(main) 47%, co(fore) 49%);
+        }
+      }
+      &::after {
+        font-weight: bold;
+        @include theme {
+          color: co(main);
+        }
+      }
+    }
+
+    & > *:first-child {
+      line-height: 1;
+      margin-bottom: 0.5em;
+    }
+  }
+}

package/list/mcui@list.scss

@@ -0,0 +1,2 @@
+@import './list@a.scss';
+@import './list@b.scss';

package/list/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@neatui/list",
+  "version": "0.1.3",
+  "description": "MCUI 核心组件，MCUI 全局架构性组件。官网 https://mcui.fekit.cn",
+  "main": "mcui@list.scss",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "xiaojunbo",
+  "license": "MIT",
+  "dependencies": {},
+  "keywords": [
+    "mcui",
+    "ui"
+  ]
+}

package/load/README.md

@@ -0,0 +1,69 @@
+# @neatui/btns
+
+官网 https://mcui.fekit.cn/
+
+## 安装组件
+
+```
+npm i @neatui/btns
+```
+
+或
+
+```
+yarn add @neatui/btns
+```
+
+## 可选主题
+
+- btns@a.scss
+- btns@b.scss
+  使用示例：
+
+```html
+<button ui-btn="@a">按钮</button>
+```
+
+## 指定语义
+
+| 语议 | 属性 | 备注                                                     |
+| ---- | ---- | -------------------------------------------------------- |
+| 主体 | main | 跟随主题风格主体色                                       |
+| 主体 | vice | 跟随主题风格辅助色                                       |
+| 提倡 | well | 代表提倡的，安全的，推荐的，成功的，建议用户点击的       |
+| 警告 | warn | 代表警告的，需再次确认的，并非绝对安全的，需要用户慎重的 |
+| 风险 | risk | 代表失败的，危险的，错误的，有风险的，不建议用户操作的   |
+| 信息 | info | 代表只读的，上面三个状态之外使用                         |
+
+使用示例：
+
+```html
+<button ui-btn="@a well"></button>
+```
+
+## 指定大小
+
+| 大小 | 属性 |
+| ---- | ---- |
+| 小   | s    |
+| 中   | m    |
+| 大   | l    |
+| 特大 | x    |
+
+使用示例：
+
+```html
+<button ui-btn="@a s"></button>
+```
+
+## 线形按钮
+
+```html
+<button ui-btn="@a :line"></button>
+```
+
+## 圆角按钮
+
+```html
+<button ui-btn="@a round"></button>
+```

package/load/load@a.scss

@@ -0,0 +1,44 @@
+[ui-load~='@a'],
+.ui-load-a {
+  @keyframes ui-load-a {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  & {
+    position: absolute;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    animation: ui-load-a 2s cubic-bezier(0.72, 0.115, 0.355, 0.88) infinite both;
+
+    &::before {
+      content: '';
+      position: absolute;
+      display: inline-block;
+      width: 50%;
+      height: 50%;
+      left: 25%;
+      top: 25%;
+      border-radius: 1em;
+      @include theme {
+        color: co(text);
+        box-shadow:
+          -1em 0 rgba(co(text), 0.7),
+          1em 0 rgba(co(text), 0.3),
+          0 1em rgba(co(text), 0.5),
+          0 -1em rgba(co(text), 0.9),
+          -0.7em 0.7em rgba(co(text), 0.6),
+          0.7em -0.7em rgba(co(text), 1),
+          -0.7em -0.7em rgba(co(text), 0.8),
+          0.7em 0.7em rgba(co(text), 0.4);
+      }
+      transform: rotate3d(0, 0, 1, 6deg) scale(0.45);
+    }
+  }
+}

package/load/load@b.scss

@@ -0,0 +1,56 @@
+[ui-load~='@b'],
+.ui-load-b {
+  @keyframes ui-load-b {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  & {
+    display: inline-block;
+    width: 1.1em;
+    height: 1.1em;
+    background:
+      linear-gradient(90deg, transparent 43%, #666 44%, #666 56%, transparent 57%) no-repeat 50% 8% / 100% 15%,
+      radial-gradient(circle at 50% 7%, #666 5.5%, transparent 6.5%),
+      radial-gradient(circle at 50% 23%, #666 6.5%, transparent 7.5%),
+      radial-gradient(circle at 20% 20%, #777 6%, transparent 7%),
+      radial-gradient(circle at 22% 22%, #777 6%, transparent 7%),
+      radial-gradient(circle at 24% 24%, #777 6%, transparent 7%),
+      radial-gradient(circle at 26% 26%, #777 6%, transparent 7%),
+      radial-gradient(circle at 28% 28%, #777 6%, transparent 7%),
+      radial-gradient(circle at 30% 30%, #777 6%, transparent 7%),
+      linear-gradient(0deg, transparent 43%, #888 44%, #888 56%, transparent 57%) no-repeat 8% 50% / 15% 100%,
+      radial-gradient(circle at 7% 50%, #888 5.5%, transparent 6.5%),
+      radial-gradient(circle at 23% 50%, #888 6.5%, transparent 7.5%),
+      radial-gradient(circle at 20% 80%, #999 6%, transparent 7%),
+      radial-gradient(circle at 22% 78%, #999 6%, transparent 7%),
+      radial-gradient(circle at 24% 76%, #999 6%, transparent 7%),
+      radial-gradient(circle at 26% 74%, #999 6%, transparent 7%),
+      radial-gradient(circle at 28% 72%, #999 6%, transparent 7%),
+      radial-gradient(circle at 30% 70%, #999 6%, transparent 7%),
+      linear-gradient(90deg, transparent 43%, #aaa 44%, #aaa 56%, transparent 57%) no-repeat 50% 92% / 100% 15%,
+      radial-gradient(circle at 50% 93%, #aaa 5.5%, transparent 6.5%),
+      radial-gradient(circle at 50% 77%, #aaa 6.5%, transparent 7.5%),
+      radial-gradient(circle at 80% 80%, #bbb 6%, transparent 7%),
+      radial-gradient(circle at 78% 78%, #bbb 6%, transparent 7%),
+      radial-gradient(circle at 76% 76%, #bbb 6%, transparent 7%),
+      radial-gradient(circle at 74% 74%, #bbb 6%, transparent 7%),
+      radial-gradient(circle at 72% 72%, #bbb 6%, transparent 7%),
+      radial-gradient(circle at 70% 70%, #bbb 6%, transparent 7%),
+      linear-gradient(0deg, transparent 43%, #ccc 44%, #ccc 56%, transparent 57%) no-repeat 92% 50% / 15% 100%,
+      radial-gradient(circle at 93% 50%, #ccc 5.5%, transparent 6.5%),
+      radial-gradient(circle at 77% 50%, #ccc 6.5%, transparent 7.5%),
+      radial-gradient(circle at 80% 20%, #ddd 6%, transparent 7%),
+      radial-gradient(circle at 78% 22%, #ddd 6%, transparent 7%),
+      radial-gradient(circle at 76% 24%, #ddd 6%, transparent 7%),
+      radial-gradient(circle at 74% 26%, #ddd 6%, transparent 7%),
+      radial-gradient(circle at 72% 28%, #ddd 6%, transparent 7%),
+      radial-gradient(circle at 70% 30%, #ddd 6%, transparent 7%);
+    animation: ui-load-b 1.5s linear infinite both;
+  }
+}

package/load/load@c.scss

@@ -0,0 +1,270 @@
+[ui-load='@c'],
+.ui-load-c {
+  $c1: rgba(051, 181, 229, 0.8);
+  $c2: rgba(255, 068, 068, 0.8);
+  $c3: rgba(255, 187, 050, 0.8);
+
+  @keyframes ui-load-c {
+    0% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 50%, $c2 10%, transparent 10.9%),
+        radial-gradient(circle at 50%, $c3 17%, transparent 17.9%);
+    }
+
+    2% {
+      background-image: radial-gradient(circle at 45%, $c1 17%, transparent 17.9%), radial-gradient(circle at 50%, $c2 11%, transparent 11.9%),
+        radial-gradient(circle at 55%, $c3 17%, transparent 17.9%);
+    }
+
+    4% {
+      background-image: radial-gradient(circle at 40%, $c1 16%, transparent 16.9%), radial-gradient(circle at 50%, $c2 12%, transparent 12.9%),
+        radial-gradient(circle at 60%, $c3 16%, transparent 16.9%);
+    }
+
+    6% {
+      background-image: radial-gradient(circle at 35%, $c1 15%, transparent 15.9%), radial-gradient(circle at 50%, $c2 13%, transparent 13.9%),
+        radial-gradient(circle at 65%, $c3 15%, transparent 15.9%);
+    }
+
+    8% {
+      background-image: radial-gradient(circle at 30%, $c1 14%, transparent 14.9%), radial-gradient(circle at 50%, $c2 14%, transparent 14.9%),
+        radial-gradient(circle at 70%, $c3 14%, transparent 14.9%);
+    }
+
+    10% {
+      background-image: radial-gradient(circle at 25%, $c1 13%, transparent 13.9%), radial-gradient(circle at 50%, $c2 15%, transparent 15.9%),
+        radial-gradient(circle at 75%, $c3 13%, transparent 13.9%);
+    }
+
+    12% {
+      background-image: radial-gradient(circle at 20%, $c1 12%, transparent 12.9%), radial-gradient(circle at 50%, $c2 16%, transparent 16.9%),
+        radial-gradient(circle at 80%, $c3 12%, transparent 12.9%);
+    }
+
+    14% {
+      background-image: radial-gradient(circle at 15%, $c1 11%, transparent 11.9%), radial-gradient(circle at 50%, $c2 17%, transparent 17.9%),
+        radial-gradient(circle at 85%, $c3 11%, transparent 11.9%);
+    }
+
+    16% {
+      background-image: radial-gradient(circle at 12%, $c1 10%, transparent 10.9%), radial-gradient(circle at 50%, $c2 17%, transparent 17.9%),
+        radial-gradient(circle at 88%, $c3 10%, transparent 10.9%);
+    }
+
+    18% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 12%, $c1 10%, transparent 10.9%),
+        radial-gradient(circle at 88%, $c3 10%, transparent 10.9%);
+    }
+
+    20% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 15%, $c1 11%, transparent 11.9%),
+        radial-gradient(circle at 85%, $c3 11%, transparent 11.9%);
+    }
+
+    22% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 20%, $c1 12%, transparent 12.9%),
+        radial-gradient(circle at 80%, $c3 12%, transparent 12.9%);
+    }
+
+    24% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 25%, $c1 13%, transparent 13.9%),
+        radial-gradient(circle at 75%, $c3 13%, transparent 13.9%);
+    }
+
+    26% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 30%, $c1 14%, transparent 14.9%),
+        radial-gradient(circle at 70%, $c3 14%, transparent 14.9%);
+    }
+
+    28% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 35%, $c1 15%, transparent 15.9%),
+        radial-gradient(circle at 65%, $c3 15%, transparent 15.9%);
+    }
+
+    30% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 40%, $c1 16%, transparent 16.9%),
+        radial-gradient(circle at 60%, $c3 16%, transparent 16.9%);
+    }
+
+    32% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 45%, $c1 17%, transparent 17.9%),
+        radial-gradient(circle at 55%, $c3 17%, transparent 17.9%);
+    }
+
+    34% {
+      background-image: radial-gradient(circle at 50%, $c2 17%, transparent 17.9%), radial-gradient(circle at 50%, $c1 17%, transparent 17.9%),
+        radial-gradient(circle at 50%, $c3 17%, transparent 17.9%);
+    }
+
+    36% {
+      background-image: radial-gradient(circle at 45%, $c2 17%, transparent 17.9%), radial-gradient(circle at 50%, $c3 00%, transparent 00.9%),
+        radial-gradient(circle at 55%, $c1 17%, transparent 17.9%);
+    }
+
+    38% {
+      background-image: radial-gradient(circle at 40%, $c2 16%, transparent 16.9%), radial-gradient(circle at 50%, $c3 00%, transparent 00.9%),
+        radial-gradient(circle at 60%, $c1 16%, transparent 16.9%);
+    }
+
+    40% {
+      background-image: radial-gradient(circle at 35%, $c2 15%, transparent 15.9%), radial-gradient(circle at 50%, $c3 05%, transparent 05.9%),
+        radial-gradient(circle at 65%, $c1 15%, transparent 15.9%);
+    }
+
+    42% {
+      background-image: radial-gradient(circle at 30%, $c2 14%, transparent 14.9%), radial-gradient(circle at 50%, $c3 10%, transparent 10.9%),
+        radial-gradient(circle at 70%, $c1 14%, transparent 14.9%);
+    }
+
+    44% {
+      background-image: radial-gradient(circle at 25%, $c2 13%, transparent 13.9%), radial-gradient(circle at 50%, $c3 15%, transparent 15.9%),
+        radial-gradient(circle at 75%, $c1 13%, transparent 13.9%);
+    }
+
+    46% {
+      background-image: radial-gradient(circle at 20%, $c2 12%, transparent 12.9%), radial-gradient(circle at 50%, $c3 17%, transparent 17.9%),
+        radial-gradient(circle at 80%, $c1 12%, transparent 12.9%);
+    }
+
+    48% {
+      background-image: radial-gradient(circle at 15%, $c2 11%, transparent 11.9%), radial-gradient(circle at 50%, $c3 17%, transparent 17.9%),
+        radial-gradient(circle at 85%, $c1 11%, transparent 11.9%);
+    }
+
+    50% {
+      background-image: radial-gradient(circle at 12%, $c2 10%, transparent 10.9%), radial-gradient(circle at 50%, $c3 17%, transparent 17.9%),
+        radial-gradient(circle at 88%, $c1 10%, transparent 10.9%);
+    }
+
+    52% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 12%, $c2 10%, transparent 10.9%),
+        radial-gradient(circle at 88%, $c1 10%, transparent 10.9%);
+    }
+
+    54% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 15%, $c2 11%, transparent 11.9%),
+        radial-gradient(circle at 85%, $c1 11%, transparent 11.9%);
+    }
+
+    56% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 20%, $c2 12%, transparent 12.9%),
+        radial-gradient(circle at 80%, $c1 12%, transparent 12.9%);
+    }
+
+    58% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 25%, $c2 13%, transparent 13.9%),
+        radial-gradient(circle at 75%, $c1 13%, transparent 13.9%);
+    }
+
+    60% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 30%, $c2 14%, transparent 14.9%),
+        radial-gradient(circle at 70%, $c1 14%, transparent 14.9%);
+    }
+
+    62% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 35%, $c2 15%, transparent 15.9%),
+        radial-gradient(circle at 65%, $c1 15%, transparent 15.9%);
+    }
+
+    64% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 40%, $c2 16%, transparent 16.9%),
+        radial-gradient(circle at 60%, $c1 16%, transparent 16.9%);
+    }
+
+    66% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 45%, $c2 17%, transparent 17.9%),
+        radial-gradient(circle at 55%, $c1 17%, transparent 17.9%);
+    }
+
+    68% {
+      background-image: radial-gradient(circle at 50%, $c3 17%, transparent 17.9%), radial-gradient(circle at 50%, $c2 17%, transparent 17.9%),
+        radial-gradient(circle at 50%, $c1 17%, transparent 17.9%);
+    }
+
+    70% {
+      background-image: radial-gradient(circle at 45%, $c3 17%, transparent 17.9%), radial-gradient(circle at 50%, $c1 00%, transparent 00.9%),
+        radial-gradient(circle at 55%, $c2 17%, transparent 17.9%);
+    }
+
+    72% {
+      background-image: radial-gradient(circle at 40%, $c3 16%, transparent 16.9%), radial-gradient(circle at 50%, $c1 00%, transparent 00.9%),
+        radial-gradient(circle at 60%, $c2 16%, transparent 16.9%);
+    }
+
+    74% {
+      background-image: radial-gradient(circle at 35%, $c3 15%, transparent 15.9%), radial-gradient(circle at 50%, $c1 05%, transparent 05.9%),
+        radial-gradient(circle at 65%, $c2 15%, transparent 15.9%);
+    }
+
+    76% {
+      background-image: radial-gradient(circle at 30%, $c3 14%, transparent 14.9%), radial-gradient(circle at 50%, $c1 10%, transparent 10.9%),
+        radial-gradient(circle at 70%, $c2 14%, transparent 14.9%);
+    }
+
+    78% {
+      background-image: radial-gradient(circle at 25%, $c3 13%, transparent 13.9%), radial-gradient(circle at 50%, $c1 15%, transparent 15.9%),
+        radial-gradient(circle at 75%, $c2 13%, transparent 13.9%);
+    }
+
+    80% {
+      background-image: radial-gradient(circle at 20%, $c3 12%, transparent 12.9%), radial-gradient(circle at 50%, $c1 17%, transparent 17.9%),
+        radial-gradient(circle at 80%, $c2 12%, transparent 12.9%);
+    }
+
+    82% {
+      background-image: radial-gradient(circle at 15%, $c3 11%, transparent 11.9%), radial-gradient(circle at 50%, $c1 17%, transparent 17.9%),
+        radial-gradient(circle at 85%, $c2 11%, transparent 11.9%);
+    }
+
+    84% {
+      background-image: radial-gradient(circle at 12%, $c3 10%, transparent 10.9%), radial-gradient(circle at 50%, $c1 17%, transparent 17.9%),
+        radial-gradient(circle at 88%, $c2 10%, transparent 10.9%);
+    }
+
+    86% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 12%, $c3 10%, transparent 10.9%),
+        radial-gradient(circle at 88%, $c2 10%, transparent 10.9%);
+    }
+
+    88% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 15%, $c3 11%, transparent 11.9%),
+        radial-gradient(circle at 85%, $c2 11%, transparent 11.9%);
+    }
+
+    90% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 20%, $c3 12%, transparent 12.9%),
+        radial-gradient(circle at 80%, $c2 12%, transparent 12.9%);
+    }
+
+    92% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 25%, $c3 13%, transparent 13.9%),
+        radial-gradient(circle at 75%, $c2 13%, transparent 13.9%);
+    }
+
+    94% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 30%, $c3 14%, transparent 14.9%),
+        radial-gradient(circle at 70%, $c2 14%, transparent 14.9%);
+    }
+
+    96% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 35%, $c3 15%, transparent 15.9%),
+        radial-gradient(circle at 65%, $c2 15%, transparent 15.9%);
+    }
+
+    98% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 40%, $c3 16%, transparent 16.9%),
+        radial-gradient(circle at 60%, $c2 16%, transparent 16.9%);
+    }
+
+    100% {
+      background-image: radial-gradient(circle at 50%, $c1 17%, transparent 17.9%), radial-gradient(circle at 45%, $c3 17%, transparent 17.9%),
+        radial-gradient(circle at 55%, $c2 17%, transparent 17.9%);
+    }
+  }
+
+  & {
+    display: inline-block;
+    width: 3em;
+    height: 3em;
+    animation: ui-load-c 2s linear infinite both;
+  }
+}