loading animation
This commit is contained in:
@@ -23,7 +23,6 @@
|
|||||||
"laravel-mix-tailwind": "^0.1.0"
|
"laravel-mix-tailwind": "^0.1.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"lottie-player-vue": "0.0.14",
|
|
||||||
"tailwindcss": "^1.6.2",
|
"tailwindcss": "^1.6.2",
|
||||||
"vue": "^2.6.11"
|
"vue": "^2.6.11"
|
||||||
}
|
}
|
||||||
|
2
public/js/app.js
vendored
2
public/js/app.js
vendored
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"/js/app.js": "/js/app.js?id=c4b9bae5600dd75feb22",
|
"/js/app.js": "/js/app.js?id=e26b00d8a9f581314b0e",
|
||||||
"/css/app.css": "/css/app.css?id=1a87fdd2f7566b3e8bee",
|
"/css/app.css": "/css/app.css?id=1a87fdd2f7566b3e8bee",
|
||||||
"/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
|
"/js/manifest.js": "/js/manifest.js?id=3c768977c2574a34506e",
|
||||||
"/js/vendor.js": "/js/vendor.js?id=968f85387c9bab0e92d2"
|
"/js/vendor.js": "/js/vendor.js?id=968f85387c9bab0e92d2"
|
||||||
|
1
resources/js/app.js
vendored
1
resources/js/app.js
vendored
@@ -8,7 +8,6 @@ import RecentStories from "./components/RecentStories";
|
|||||||
import AvailableSources from './components/AvailableSources';
|
import AvailableSources from './components/AvailableSources';
|
||||||
import SourceView from './components/SourceView';
|
import SourceView from './components/SourceView';
|
||||||
|
|
||||||
|
|
||||||
const app = new Vue({
|
const app = new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
components: {
|
components: {
|
||||||
|
@@ -74,10 +74,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-center">
|
<div class="flex justify-center">
|
||||||
|
|
||||||
|
<div v-show="loading">
|
||||||
|
<lottie-player src="https://assets9.lottiefiles.com/private_files/lf30_bIUWq7.json" background="transparent" speed="3" style="width: 100px; height: 100px;" loop autoplay></lottie-player>
|
||||||
|
</div>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
:disabled="loading != 0"
|
v-show="loading == 0"
|
||||||
v-if="moreArticles"
|
v-if="moreArticles"
|
||||||
@click="fetchNewArticles()"
|
@click="fetchNewArticles()"
|
||||||
class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
|
class="ml-4 text-white h-10 flex items-center justify-center px-4 bg-main-link rounded shadow font-medium"
|
||||||
@@ -91,6 +96,7 @@
|
|||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as moment from "moment";
|
import * as moment from "moment";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
source: Object
|
source: Object
|
||||||
|
@@ -2,4 +2,8 @@
|
|||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
<source-view :source="{{$source}}" ></source-view>
|
<source-view :source="{{$source}}" ></source-view>
|
||||||
|
@endsection
|
||||||
|
|
||||||
|
@section('js')
|
||||||
|
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||||
@endsection
|
@endsection
|
Reference in New Issue
Block a user