Skip to content

Instantly share code, notes, and snippets.

@manutheblacker

manutheblacker/SkeletonLoader.vue

Forked from andresabello/SkeletonLoader.vue
Created November 25, 2022 13:28
Show Gist options
  • Save manutheblacker/0b9145d51438e004c41a635ae69732b5 to your computer and use it in GitHub Desktop.
Save manutheblacker/0b9145d51438e004c41a635ae69732b5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @andresabello andresabello renamed this gist May 22, 2020. 1 changed file with 0 additions and 0 deletions.
    0 ParentSkeleton.vue → SkeletonParentSkeleton.vue
    View file
    File renamed without changes.
  2. @andresabello andresabello revised this gist May 22, 2020. 1 changed file with 31 additions and 0 deletions.
    31 changes: 31 additions & 0 deletions ParentSkeleton.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    <template>
    <skeleton-loader :loading="loading"></skeleton-loader>
    </template>

    <script>
    import SkeletonLoader from './SkeletonLoader'
    export default {
    name: 'ParentSkeleton',
    data () {
    return {
    loading: false
    }
    },
    mounted () {
    setTimeout(() => {
    this.setLoadingState(false)
    }, 5000)
    },
    methods: {
    setLoadingState (value) {
    this.loading = value
    }
    },
    components: { SkeletonLoader }
    }
    </script>

    <style scoped>
    </style>
  3. @andresabello andresabello revised this gist May 22, 2020. 1 changed file with 136 additions and 0 deletions.
    136 changes: 136 additions & 0 deletions SkeletonLoaderWithParent.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,136 @@
    <template>
    <div class="container">
    <div class="row" v-show="loading">
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="square"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="circle"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="rectangle"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default {
    name: 'SkeletonLoader',
    props: {
    loading: {
    type: Boolean,
    default: false,
    required: true
    }
    }
    }
    </script>

    <style scoped lang="scss">
    .placeholder {
    margin: 15px;
    padding: 10px;
    border-radius: 5px;
    &.pulse div {
    animation: pulse 1s infinite ease-in-out;
    -webkit-animation: pulse 1s infinite ease-in-out;
    }
    &.wave div {
    animation: wave 1s infinite linear forwards;
    -webkit-animation: wave 1s infinite linear forwards;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    }
    div {
    background: #E8E8E8;
    }
    .square {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 0 10px;
    }
    .rectangle {
    float: left;
    width: 40px;
    height: 30px;
    margin: 0 0 10px;
    }
    .line {
    height: 12px;
    margin: 0 0 10px 50px;
    width: 70%;
    }
    .circle {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 15px 10px 0;
    border-radius: 40px;
    }
    }
    @keyframes pulse {
    0% {
    background-color: rgba(165, 165, 165, .1);
    }
    50% {
    background-color: rgba(165, 165, 165, .3);
    }
    100% {
    background-color: rgba(165, 165, 165, .1);
    }
    }
    @-webkit-keyframes pulse {
    0% {
    background-color: rgba(165, 165, 165, .1);
    }
    50% {
    background-color: rgba(165, 165, 165, .3);
    }
    100% {
    background-color: rgba(165, 165, 165, .1);
    }
    }
    @keyframes wave {
    0% {
    background-position: -468px 0
    }
    100% {
    background-position: 468px 0
    }
    }
    @-webkit-keyframes wave {
    0% {
    background-position: -468px 0
    }
    100% {
    background-position: 468px 0
    }
    }
    </style>
  4. @andresabello andresabello revised this gist May 22, 2020. No changes.
  5. @andresabello andresabello created this gist May 22, 2020.
    144 changes: 144 additions & 0 deletions SkeletonLoader.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,144 @@
    <template>
    <div class="container">
    <div class="row" v-show="loading">
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="square"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="circle"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    <div class="col-xl-4 pt-5">
    <div class="placeholder wave">
    <div class="rectangle"></div>
    <div class="line"></div>
    <div class="line"></div>
    </div>
    </div>
    </div>
    </div>
    </template>

    <script>
    export default {
    name: 'SkeletonLoader',
    data () {
    return {
    loading: true
    }
    },
    mounted(){
    setTimeout(() => {
    this.setLoadingState(false)
    }, 5000)
    },
    methods: {
    setLoadingState (value) {
    this.loading = value
    }
    }
    }
    </script>

    <style scoped lang="scss">
    .placeholder {
    margin: 15px;
    padding: 10px;
    border-radius: 5px;
    &.pulse div {
    animation: pulse 1s infinite ease-in-out;
    -webkit-animation: pulse 1s infinite ease-in-out;
    }
    &.wave div {
    animation: wave 1s infinite linear forwards;
    -webkit-animation: wave 1s infinite linear forwards;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    }
    div {
    background: #E8E8E8;
    }
    .square {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 0 10px;
    }
    .rectangle {
    float: left;
    width: 40px;
    height: 30px;
    margin: 0 0 10px;
    }
    .line {
    height: 12px;
    margin: 0 0 10px 50px;
    width: 70%;
    }
    .circle {
    float: left;
    width: 40px;
    height: 40px;
    margin: 0 15px 10px 0;
    border-radius: 40px;
    }
    }
    @keyframes pulse {
    0% {
    background-color: rgba(165, 165, 165, .1);
    }
    50% {
    background-color: rgba(165, 165, 165, .3);
    }
    100% {
    background-color: rgba(165, 165, 165, .1);
    }
    }
    @-webkit-keyframes pulse {
    0% {
    background-color: rgba(165, 165, 165, .1);
    }
    50% {
    background-color: rgba(165, 165, 165, .3);
    }
    100% {
    background-color: rgba(165, 165, 165, .1);
    }
    }
    @keyframes wave {
    0% {
    background-position: -468px 0
    }
    100% {
    background-position: 468px 0
    }
    }
    @-webkit-keyframes wave {
    0% {
    background-position: -468px 0
    }
    100% {
    background-position: 468px 0
    }
    }
    </style>