loading animation

This commit is contained in:
2020-08-21 03:05:07 +05:00
parent 8915f9f7a0
commit 03f3465799
6 changed files with 14 additions and 6 deletions

View File

@@ -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

File diff suppressed because one or more lines are too long

View File

@@ -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
View File

@@ -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: {

View File

@@ -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

View File

@@ -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