Skeleton Loader: Examples

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="acl-skeleton-loader-demo-container">
    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:200px; height: 150px">
        <div class="acl-skeleton-loader__card acl-skeleton__column">
            <div class="acl-skeleton-loader__square-placeholder"></div>

            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--large acl-skeleton-loader__text-placeholder--rounded" style="width: 150px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
        </div>
    </div>

    <div class="acl-skeleton-loader  acl-skeleton-loader-demo" style="width:90px; height: 130px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__card--right">
            <div class="acl-skeleton-loader__circle-placeholder"></div>

            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 55px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 35px"></div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:200px; height: 130px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__card--center">
            <div class="acl-skeleton-loader__circle-placeholder acl-skeleton-loader__circle-placeholder--medium"></div>

            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 80px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px;">
        <div class="acl-skeleton-loader__card">
            <div class="acl-skeleton-loader__row">
                <div class="acl-skeleton-loader__square-placeholder acl-skeleton-loader__margin-right--medium"></div>

                <div class="acl-skeleton-loader__flex-column">
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 150px"></div>
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
                </div>
            </div>
            <div class="acl-skeleton-loader__row">
                <div class="acl-skeleton-loader__square-placeholder acl-skeleton-loader__margin-right--medium"></div>

                <div class="acl-skeleton-loader__flex-column">
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 150px"></div>
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
                    <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small" style="width: 85px"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 80px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__row acl-skeleton-loader__row--vertical-center">
            <div class="acl-skeleton-loader__circle-placeholder"></div>

            <div class="acl-skeleton-loader__flex-column acl-skeleton-loader__margin-left--medium">
                <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 150px"></div>
                <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
                <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
            </div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height:120px">
        <div class="acl-skeleton-loader__card">
            <div class="acl-skeleton-loader__row acl-skeleton-loader__row--wrap acl-skeleton-loader__row--space-between">
                <div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
                <div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
                <div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
                <div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
            </div>

            <div class="acl-skeleton__column">
                <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 200px"></div>
                <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 175px"></div>
            </div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 200px">
        <div class="acl-skeleton-loader__card">
            <div class="acl-skeleton-loader__circle-placeholder"></div>

            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--large acl-skeleton-loader__text-placeholder--rounded" style="width: 150px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
            <div class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded" style="width: 85px"></div>
        </div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 100px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__card--straight-corners"></div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height:250px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__row"></div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 100px">
        <div class="acl-skeleton-loader__card"></div>
    </div>

    <div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:350px; height:100px">
        <div class="acl-skeleton-loader__card acl-skeleton-loader__row"></div>
    </div>
</div>

<style>
    .acl-skeleton-loader-demo {
        margin: 25px;
    }

    .acl-skeleton-loader-demo-container {
        display: flex;
        flex-wrap: wrap;
    }
</style>


        <div class="acl-skeleton-loader-demo-container">
	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:200px; height: 150px">
		<div class="acl-skeleton-loader__card acl-skeleton__column">
			<div class="acl-skeleton-loader__square-placeholder"></div>

			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--large acl-skeleton-loader__text-placeholder--rounded"
				style="width: 150px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
				style="width: 85px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
				style="width: 85px"
			></div>
		</div>
	</div>

	<div class="acl-skeleton-loader  acl-skeleton-loader-demo" style="width:90px; height: 130px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__card--right">
			<div class="acl-skeleton-loader__circle-placeholder"></div>

			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
				style="width: 55px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
				style="width: 35px"
			></div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:200px; height: 130px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__card--center">
			<div class="acl-skeleton-loader__circle-placeholder acl-skeleton-loader__circle-placeholder--medium"></div>

			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
				style="width: 80px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
				style="width: 85px"
			></div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px;">
		<div class="acl-skeleton-loader__card">
			<div class="acl-skeleton-loader__row">
				<div class="acl-skeleton-loader__square-placeholder acl-skeleton-loader__margin-right--medium"></div>

				<div class="acl-skeleton-loader__flex-column">
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
						style="width: 150px"
					></div>
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
						style="width: 85px"
					></div>
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
						style="width: 85px"
					></div>
				</div>
			</div>
			<div class="acl-skeleton-loader__row">
				<div class="acl-skeleton-loader__square-placeholder acl-skeleton-loader__margin-right--medium"></div>

				<div class="acl-skeleton-loader__flex-column">
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
						style="width: 150px"
					></div>
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
						style="width: 85px"
					></div>
					<div
						class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small"
						style="width: 85px"
					></div>
				</div>
			</div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 80px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__row acl-skeleton-loader__row--vertical-center">
			<div class="acl-skeleton-loader__circle-placeholder"></div>

			<div class="acl-skeleton-loader__flex-column acl-skeleton-loader__margin-left--medium">
				<div
					class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
					style="width: 150px"
				></div>
				<div
					class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
					style="width: 85px"
				></div>
				<div
					class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
					style="width: 85px"
				></div>
			</div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height:120px">
		<div class="acl-skeleton-loader__card">
			<div
				class="acl-skeleton-loader__row acl-skeleton-loader__row--wrap acl-skeleton-loader__row--space-between"
			>
				<div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
				<div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
				<div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
				<div class="acl-skeleton-loader__square-placeholder" style="width: 50px"></div>
			</div>

			<div class="acl-skeleton__column">
				<div
					class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
					style="width: 200px"
				></div>
				<div
					class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
					style="width: 175px"
				></div>
			</div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 200px">
		<div class="acl-skeleton-loader__card">
			<div class="acl-skeleton-loader__circle-placeholder"></div>

			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--large acl-skeleton-loader__text-placeholder--rounded"
				style="width: 150px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--rounded"
				style="width: 85px"
			></div>
			<div
				class="acl-skeleton-loader__text-placeholder acl-skeleton-loader__text-placeholder--small acl-skeleton-loader__text-placeholder--rounded"
				style="width: 85px"
			></div>
		</div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 100px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__card--straight-corners"></div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height:250px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__row"></div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:250px; height: 100px">
		<div class="acl-skeleton-loader__card"></div>
	</div>

	<div class="acl-skeleton-loader acl-skeleton-loader-demo" style="width:350px; height:100px">
		<div class="acl-skeleton-loader__card acl-skeleton-loader__row"></div>
	</div>
</div>

<style>
	.acl-skeleton-loader-demo {
		margin: 25px;
	}

	.acl-skeleton-loader-demo-container {
		display: flex;
		flex-wrap: wrap;
	}
</style>


        
            
            /* No context defined. */

File:

Content:


                                %animate {
	&::after {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		transform: translateX(-100%);
		background-image: linear-gradient(
			90deg,
			rgba(#fff, 0),
			rgba(#fff, 0.6) 30%,
			rgba(#fff, 0.5) 70%,
			rgba(#fff, 0)
		);
		animation: shimmer 2s infinite;
		content: '';
	}
}

$background-colour: #f0f0f0; // To be considered for ACL styleguide variable
$element-colour: $light-grey;

.acl-skeleton-loader {
	position: relative;
	overflow: hidden;

	&__card {
		background-color: $background-colour;
		padding: 10px;
		display: flex;
		flex-direction: column;
		opacity: 1;
		border-radius: 8px;
		@extend %animate;
		width: calc(100% - 20px);
		height: calc(100% - 20px);

		&--center {
			align-items: center;
		}

		&--right {
			align-items: flex-end;
		}

		&--left {
			align-items: flex-start;
		}

		&--straight-corners {
			border-radius: 0px;
		}
	}

	&__card-content {
		padding: 10px;
	}

	&__row {
		flex-direction: row;
		display: flex;

		&--vertical-center {
			align-items: center;
		}

		&--vertical-top {
			align-items: flex-start;
		}

		&--vertical-bottom {
			align-items: flex-end;
		}

		&--center {
			justify-content: center;
		}

		&--left {
			justify-content: flex-start;
		}

		&--right {
			justify-content: flex-end;
		}

		&--wrap {
			flex-wrap: wrap;
		}

		&--space-between {
			justify-content: space-between;
		}

		&--space-evenly {
			justify-content: space-evenly;
		}
	}

	&__column {
		flex-direction: column;

		&--vertical-center {
			align-items: center;
		}

		&--vertical-top {
			align-items: flex-start;
		}

		&--vertical-bottom {
			align-items: flex-end;
		}

		&--center {
			justify-content: center;
		}

		&--left {
			align-items: flex-start;
		}

		&--right {
			align-items: flex-end;
		}
	}

	&__margin-left {
		&--small {
			margin-left: 5px !important;
		}

		&--medium {
			margin-left: 15px !important;
		}

		&--large {
			margin-left: 20px !important;
		}
	}

	&__margin-right {
		&--small {
			margin-right: 5px !important;
		}

		&--medium {
			margin-right: 15px !important;
		}

		&--large {
			margin-right: 20px !important;
		}
	}

	&__circle-placeholder {
		height: 50px;
		width: 50px;
		background-color: $element-colour;
		border-radius: 50%;
		display: inline-block;
		margin: 5px 0;

		&--small {
			height: 25px;
			width: 25px;
		}

		&--medium {
			height: 50px;
			width: 50px;
		}

		&--large {
			height: 75px;
			width: 75px;
		}
	}

	&__square-placeholder {
		background-color: $element-colour;
		height: 50px;
		width: 50px;
		border-radius: 8px;
		margin: 5px 0;

		&--small {
			height: 25px;
			width: 25px;
		}

		&--medium {
			height: 50px;
			width: 50px;
		}

		&--large {
			height: 75px;
			width: 75px;
		}
	}

	&__text-placeholder {
		background-color: $element-colour;
		margin: 5px 0;
		height: 20px;

		&--rounded {
			border-radius: 4px;
		}

		&--small {
			height: 10px;
		}

		&--medium {
			height: 25px;
		}

		&--large {
			height: 30px;
		}
	}

	&__divider {
		border-bottom: 1px solid $element-colour;
		margin: 5px 0;
	}
}
@keyframes shimmer {
	100% {
		transform: translateX(100%);
	}
}

URL: /components/raw/skeleton-loader/acl-skeleton-loader.scss
Filesystem Path: src/components/skeleton-loader/acl-skeleton-loader.scss
Size: 3.1 KB

Handle: @skeleton-loader--examples
Preview:
- With layout
- Component only
Filesystem Path: src/components/skeleton-loader/skeleton-loader--examples.hbs

No notes defined.