Skeleton Widgets - Documentation (O11)

Stable version 1.0.0 (Compatible with OutSystems 11)

Uploaded

on 07 February 2024

0.0

(0 ratings)

Documentation

1.0.0

CSS Variables:

Custom Variables

Variable	Description	Default	Valid Class
--c-w	Container width.	300px	VALID FOR ALL
--c-p	Container padding.	10px
--c-bg	Container background.	transparent
--bg	Shapes background.	#e2e1eb
--shine	Shine animation color.	rgba(255,255,255, 0.2)
--t	Shine animation duration.	2s
--lines	Lines count.	1	.skeleton-line.skeleton-rect.skeleton-circle-multi-line.skeleton-card-2.skeleton-card-3.skeleton-list
--l-h	Line height.	20px	.skeleton-line.skeleton-rect.skeleton-circle-multi-line.skeleton-card-2.skeleton-card-3.skeleton-list.skeleton-youtube
--l-gap	Gap between the lines.	10px
--g-gap	Gap between the groups. E.g. circle and other lines.	15px	.skeleton-rect.skeleton-circle-line.skeleton-circle-multi-line.skeleton-card-1.skeleton-card-2.skeleton-card-3.skeleton-list.skeleton-youtube
--c-s	Circle size.	40px	.skeleton-circle.skeleton-circle-line.skeleton-circle-multi-line.skeleton-card-1.skeleton-card-3.skeleton-youtube
--c-pos	Circle position.	center (can be top, bottom, center or percent value)	.skeleton-circle-line.skeleton-circle-multi-line
--rect-h	Rectangle height.	80px	.skeleton-rect.skeleton-youtube
--chart-h	Chart height.	200px	.skeleton-chart-columns.skeleton-chart-line
--chart-btm	Chart bottom height.	40px	.skeleton-chart-line
--cols	Columns count.	5 (Max 10)	.skeleton-chart-columns
--col-w	Column width.	25px
--col-gap	Gap between columns.	25px
--card-h	Card height.	150px	.skeleton-card-1
--f-l-w	First line width.	90%	.skeleton-card-2.skeleton-card-3
--f-l-h	First line height.	25px
--s-l-w	Second line width.	70%
--s-l-h	Second line height.	20px
--s-l-m-t	Second line margin-top.	15px
--f-l-c	First line color.	#e2e1eb	.skeleton-card-2
--s-l-c	Second line color.	#e2e1eb	.skeleton-card-2
--bullet-ratio	Bullet size depending on --l-h. *Note that, must be equal or bigger than 1.	1.4	.skeleton-list
--i-w	Width and height of .skeleton-image	250px	.skeleton-image

Helper Classes

Class	Description	Required Class
.adapt-to-circle	No --lines needed. Just need to set --c-s (circle-size). The lines will be produced and placed automatically based on the size of the circle.	.skeleton-circle-multi-line
.no-animate	Cancels the animation.