You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@iotdb.apache.org by do...@apache.org on 2019/05/09 05:37:57 UTC
[incubator-iotdb-website] branch master updated: add loading bar
This is an automated email from the ASF dual-hosted git repository.
dope pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-iotdb-website.git
The following commit(s) were added to refs/heads/master by this push:
new 6a81a6b add loading bar
new a9b7023 Merge branch 'master' of github.com:apache/incubator-iotdb-website
6a81a6b is described below
commit 6a81a6bbbb33e05f8cf321655fcf165444bd3604
Author: XuYi <xu...@126.com>
AuthorDate: Thu May 9 13:37:26 2019 +0800
add loading bar
---
src/components/Loading.vue | 60 ++++++++++++++++++++++++++++++++++++++++++++
src/views/Community.vue | 8 +++++-
src/views/Development.vue | 14 ++++++++---
src/views/Example.vue | 10 ++++++--
src/views/LatestDoc.vue | 8 +++++-
src/views/SingleMaterial.vue | 8 +++++-
src/views/SingleTool.vue | 8 +++++-
7 files changed, 106 insertions(+), 10 deletions(-)
diff --git a/src/components/Loading.vue b/src/components/Loading.vue
new file mode 100644
index 0000000..6523d9c
--- /dev/null
+++ b/src/components/Loading.vue
@@ -0,0 +1,60 @@
+<template>
+ <div id="loading-bar">
+ <span class="loading-icon"></span>
+ <span class="loading-icon"></span>
+ <span class="loading-icon"></span>
+ <span class="loading-icon"></span>
+ </div>
+</template>
+
+<script>
+ export default {
+ name: "LoadingBar",
+ }
+</script>
+
+<style>
+ #loading-bar {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ justify-content: space-between;
+ width: 3em;
+ margin-left: auto;
+ margin-right: auto;
+ margin-top: 50px;
+ }
+
+ .loading-icon {
+ width: 0.6em;
+ height: 2em;
+ background-color: orange;
+ }
+
+ .loading-icon:nth-of-type(1) {
+ animation: grow 1s -0.45s ease-in-out infinite;
+ }
+
+ .loading-icon:nth-of-type(2) {
+ animation: grow 1s -0.3s ease-in-out infinite;
+ }
+
+ .loading-icon:nth-of-type(3) {
+ animation: grow 1s -0.15s ease-in-out infinite;
+ }
+
+ .loading-icon:nth-of-type(4) {
+ animation: grow 1s ease-in-out infinite;
+ }
+
+ @keyframes grow {
+ 0%,
+ 100% {
+ transform: scaleY(1);
+ }
+
+ 50% {
+ transform: scaleY(2);
+ }
+ }
+</style>
diff --git a/src/views/Community.vue b/src/views/Community.vue
index 5ff7a07..c996529 100644
--- a/src/views/Community.vue
+++ b/src/views/Community.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row markdown-body">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -25,6 +26,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "Community",
@@ -32,12 +34,14 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Community Page',
md: "",
toc: "",
+ seen: true
}
},
created() {
@@ -70,9 +74,11 @@
this.$router.push('/404');
}
const pointer = this;
+ this.seen = true;
axios.get(url)
.then(function (response) {
pointer.md = response.data;
+ pointer.seen = false;
})
},
parse(html){
diff --git a/src/views/Development.vue b/src/views/Development.vue
index 72b757f..b5f1943 100644
--- a/src/views/Development.vue
+++ b/src/views/Development.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row markdown-body">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -22,6 +23,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "Development",
@@ -29,13 +31,15 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Community Page',
toc: "",
md: "",
- locate: ""
+ locate: "",
+ seen: true,
}
},
created() {
@@ -53,9 +57,11 @@
Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['branch'] +
"/docs/Development.md";
let pointer = this;
+ this.seen = true;
axios.get(url).then(function (response) {
- pointer.md = response.data;
- })
+ pointer.md = response.data;
+ pointer.seen = false;
+ })
},
parse(html){
return Golbal.isReadyForPrerender(html)
diff --git a/src/views/Example.vue b/src/views/Example.vue
index 8104b67..07c8b1e 100644
--- a/src/views/Example.vue
+++ b/src/views/Example.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -21,6 +22,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "Example",
@@ -28,12 +30,14 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Example Page',
md: "",
- toc: ""
+ toc: "",
+ seen: true,
}
},
created() {
@@ -45,9 +49,11 @@
Golbal.SUPPORT_VERSION[Golbal.DEFAULT_VERSION]['branch'] +
"/docs/Documentation/OtherMaterial-Examples.md";
const pointer = this;
+ this.seen = true;
axios.get(url)
.then(function (response) {
pointer.md = response.data;
+ pointer.seen = false;
})
},
parse(html){
diff --git a/src/views/LatestDoc.vue b/src/views/LatestDoc.vue
index 05c7c96..dc42be6 100644
--- a/src/views/LatestDoc.vue
+++ b/src/views/LatestDoc.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row markdown-body">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -21,6 +22,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "Community",
@@ -28,12 +30,14 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Community Page',
md: "",
toc: "",
+ seen: true
}
},
created() {
@@ -63,9 +67,11 @@
this.$router.push('/404');
}
const pointer = this;
+ this.seen = true;
axios.get(url)
.then(function (response) {
pointer.md = response.data;
+ pointer.seen = false;
})
},
parse(html){
diff --git a/src/views/SingleMaterial.vue b/src/views/SingleMaterial.vue
index 4e369b7..4faad6a 100644
--- a/src/views/SingleMaterial.vue
+++ b/src/views/SingleMaterial.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row markdown-body">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -18,6 +19,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "SingleMaterial",
@@ -25,12 +27,14 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Community Page',
md: "",
toc: "",
+ seen: true,
}
},
created() {
@@ -62,9 +66,11 @@
this.$router.push('/404');
}
const pointer = this;
+ this.seen = true;
axios.get(url)
.then(function (response) {
pointer.md = response.data;
+ pointer.seen = false;
})
},
parse(html){
diff --git a/src/views/SingleTool.vue b/src/views/SingleTool.vue
index ee6f8f6..827240f 100644
--- a/src/views/SingleTool.vue
+++ b/src/views/SingleTool.vue
@@ -3,7 +3,8 @@
<div class="container">
<div class="row markdown-body">
<div class="col-sm-8">
- <vue-markdown v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
+ <loading v-if="seen"></loading>
+ <vue-markdown v-if="seen==false" v-bind:source="md" :toc="true" :toc-anchor-link-symbol="toc" :postrender="parse"></vue-markdown>
</div>
<my-sidebar/>
</div>
@@ -21,6 +22,7 @@
import markdown from 'vue-markdown'
import axios from 'axios'
import Golbal from '../components/Global'
+ import LoadingBar from '../components/Loading'
export default {
name: "SingleTool",
@@ -28,12 +30,14 @@
'footer-bar': Footer,
'my-sidebar': SideBar,
'vue-markdown': markdown,
+ 'loading': LoadingBar,
},
data() {
return {
msg: 'Welcome to Tool Page',
md: "",
toc: "",
+ seen: true,
}
},
created() {
@@ -74,9 +78,11 @@
this.$router.push('/404');
}
const pointer = this;
+ this.seen = true;
axios.get(url)
.then(function (response) {
pointer.md = response.data;
+ pointer.seen = false;
})
},
parse(html){