Breaking News: Grepper is joining You.com. Read the official announcement!

Simple Loading Skeleton

Add Answer

Rasetz answered on September 20, 2021 Popularity 1/10 Helpfulness 1/10

answer Simple Loading Skeleton

related css skeleton loading

related skeleton loading

related text between horizontal lines

Simple Loading Skeleton

Comment

#root {
    --main-color: #7900b1;
    --main-color-light: #9b4dcb;
}

/* loading skeletons */
@keyframes skeleton-loading {
    0% {
        background-position: right;
    }
    50% {
        background-position: left;
    }
    100% {
        background-position: right;
    }
}

.skeleton {
    content: ' ';
    cursor: progress;
    padding: 18px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--main-color) 40%, var(--main-color-light), var(--main-color) 60%) right / 300% 100%;
    animation: skeleton-loading 1.5s linear infinite;
    opacity: 0.3;
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: css loading

Link to this answer
Share Copy Link

Contributed on Sep 20 2024

Rasetz

0 Answers Avg Quality 2/10

Closely Related Answers

css skeleton loading

Comment

<div class="card-skeleton">
  <div class="skeleton-image"></div>
  <div class="skeleton-text"></div>
</div>

.card-skeleton {
  width: 300px;
  height: 200px;
  background: #f0f0f0;
  border-radius: 8px;
  animation: shimmer 1.5s infinite;
}

.skeleton-image {
  width: 100%;
  height: 60%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.skeleton-text {
  width: 80%;
  height: 10px;
  margin: 10px auto;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Sep 17 2023

Lovely Lyrebird

0 Answers Avg Quality 2/10

skeleton loading

Comment

import Skeleton from 'react-loading-skeleton';

<Skeleton/> // Simple, single-line loading skeleton
<Skeleton count={5}/> // Five-line loading skeleton

Popularity 10/10 Helpfulness 2/10 Language whatever

Source: www.npmjs.com

Tags: loading

Link to this answer
Share Copy Link

Contributed on Sep 20 2021

Tender Tapir

0 Answers Avg Quality 2/10

text between horizontal lines

Comment

<div className="flex items-center my-1">
                        <div className="flex-grow border-t border-gray-300"></div>
                        <span className="mx-4 text-gray-500">or</span>
                        <div className="flex-grow border-t border-gray-300"></div>
                    </div>

Popularity 4/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: between horizontal-line text whatever

Link to this answer
Share Copy Link

Contributed on Sep 20 2024

Doyin Atobaru

0 Answers Avg Quality 2/10

Simple Loading Skeleton

Contents

More Related Answers

Simple Loading Skeleton

Closely Related Answers

css skeleton loading

skeleton loading

text between horizontal lines

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.