Skeletons in bulma

The b.SkeletonBlock constructor creates a block skeleton.

The b.SkeletonLines constructor creates a block of skeleton lines. It takes the number of lines as its only argument

Use the b.Skeleton modifier on any supported component to make it a skeleton. Use b.HasSkeleton for the has-skeleton class.

Skeleton block

Bulma documentation

Example

Code

b.SkeletonBlock()

ResultHTML

<div class="skeleton-block"></div>

Example

Code

b.SkeletonBlock(
	"Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.",
)

ResultHTML

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

<div class="skeleton-block">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>

Skeleton lines

Bulma documentation

Example

Code

b.SkeletonLines(5)

ResultHTML

<div class="skeleton-lines"><div></div><div></div><div></div><div></div><div></div></div>

Bulma components with skeletons

Bulma documentation

Button

Example

Code

b.Buttons(
	b.Button(b.Skeleton, "Button"),
	b.Button(b.Link, b.Skeleton, "Link"),
	b.Button(b.Primary, b.Skeleton, "Primary"),
	b.Button(b.Success, b.Skeleton, "Success"),
	b.Button(b.Info, b.Skeleton, "Info"),
	b.Button(b.Warning, b.Skeleton, "Warning"),
	b.Button(b.Danger, b.Skeleton, "Danger"),
)

ResultHTML

<div class="buttons"><button class="button is-skeleton">Button</button><button class="button is-link is-skeleton">Link</button><button class="button is-primary is-skeleton">Primary</button><button class="button is-success is-skeleton">Success</button><button class="button is-info is-skeleton">Info</button><button class="button is-warning is-skeleton">Warning</button><button class="button is-danger is-skeleton">Danger</button></div>

Icon

Example

Code

fa.Icon(fa.Solid, "reply", b.Skeleton)

ResultHTML

<span class="is-skeleton icon"><i class="fa-solid fa-reply"></i></span>

Image

Example

Code

b.ImageImg("https://placehold.co/16x16", b.ImgSq16, b.Skeleton),
b.ImageImg("https://placehold.co/32x32", b.ImgSq32, b.Skeleton),
b.ImageImg("https://placehold.co/64x64", b.ImgSq64, b.Skeleton),
b.ImageImg("https://placehold.co/128x128", b.ImgSq128, b.Skeleton)

ResultHTML

<figure class="image is-16x16 is-skeleton"><img src="https://placehold.co/16x16"></figure>
<figure class="image is-24x24 is-skeleton"><img src="https://placehold.co/32x32"></figure>
<figure class="image is-64x64 is-skeleton"><img src="https://placehold.co/64x64"></figure>
<figure class="image is-128x128 is-skeleton"><img src="https://placehold.co/128x128"></figure>

Media object

Example

Code

b.Media(
	b.MediaLeft(
		b.ImageImg("https://placehold.co/128x128", html.P, b.ImgSq64, b.Skeleton),
	),
	b.Content(
		b.Skeleton,
		e.P(
			e.Strong("John Smith"), " ", e.Small("@johnsmith"), " ", e.Small("31m"),
			e.Br(),
			"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.",
		),
	),
	b.Level(
		b.Mobile,
		b.LevelLeft(
			e.A(fa.Icon(fa.Solid, "reply", b.Small, b.Skeleton)),
			e.A(fa.Icon(fa.Solid, "retweet", b.Small, b.Skeleton)),
			e.A(fa.Icon(fa.Solid, "heart", b.Small, b.Skeleton)),
		),
	),
	b.MediaRight(
		b.Delete(e.AriaLabel("delete"), b.Skeleton),
	),
)

ResultHTML

John Smith @johnsmith 31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.

<article class="media"><div class="media-left"><p class="image is-64x64 is-skeleton"><img src="https://placehold.co/128x128"></p></div><div class="media-content"><div class="content is-skeleton"><p><strong>John Smith</strong> <small>@johnsmith</small> <small>31m</small><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.</p></div><nav class="level is-mobile"><div class="level-left"><a class="level-item"><span class="is-small is-skeleton icon"><i class="fa-solid fa-reply"></i></span></a><a class="level-item"><span class="is-small is-skeleton icon"><i class="fa-solid fa-retweet"></i></span></a><a class="level-item"><span class="icon is-small is-skeleton"><i class="fa-solid fa-heart"></i></span></a></div></nav></div><div class="media-right"><button class="delete is-skeleton" aria-label="delete"></button></div></article>

Example

Code

b.Media(
	b.MediaLeft(b.ImageImg("https://placehold.co/128x128", html.P, b.ImgSq64, b.Skeleton)),
	b.Field(
		b.Control(
			html.P,
			b.Textarea(b.Skeleton, e.Placeholder("Add a comment...")),
		),
	),
	b.Level(
		b.LevelLeft(
			e.Div(
				b.ButtonA(b.Info, b.Skeleton, "Submit"),
			),
		),
		b.LevelRight(
			e.Div(
				b.Checkbox(
					b.OnLabel(b.Skeleton),
					"Press enter to submit",
				),
			),
		),
	),
)

ResultHTML

<article class="media"><div class="media-left"><p class="image is-64x64 is-skeleton"><img src="https://placehold.co/128x128"></p></div><div class="media-content"><div class="field"><p class="control"><textarea class="textarea is-skeleton" placeholder="Add a comment..."></textarea></p></div><nav class="level"><div class="level-left"><div class="level-item"><a class="button is-info is-skeleton">Submit</a></div></div><div class="level-right"><div class="level-item"><label class="checkbox is-skeleton"><input type="checkbox"> Press enter to submit</label></div></div></nav></div></article>

Notification

Example

Code

b.Notification(
	b.Skeleton,
	"Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.",
)

ResultHTML

Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

<div class="notification is-skeleton">Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</div>

Tag

Example

Code

b.Tag(b.Skeleton, "Tag"), " ",
b.Tag(b.Link, b.Skeleton, "Link"), " ",
b.Tag(b.Primary, b.Skeleton, "Primary"), " ",
b.Tag(b.Info, b.Skeleton, "Info"), " ",
b.Tag(b.Success, b.Skeleton, "Success"), " ",
b.Tag(b.Warning, b.Skeleton, "Warning"), " ",
b.Tag(b.Danger, b.Skeleton, "Danger")

ResultHTML

Tag Link Primary Info Success Warning Danger

<span class="tag is-skeleton">Tag</span>

<span class="is-link is-skeleton tag">Link</span>

<span class="tag is-primary is-skeleton">Primary</span>

<span class="tag is-info is-skeleton">Info</span>

<span class="tag is-success is-skeleton">Success</span>

<span class="tag is-warning is-skeleton">Warning</span>

<span class="is-skeleton tag is-danger">Danger</span>

Title and subtitle

Example

Code

b.Title(b.Skeleton, "Title")

ResultHTML

Title

<h1 class="title is-skeleton">Title</h1>

Example

Code

b.Title(b.HasSkeleton, "Title")

ResultHTML

Title

<h1 class="title has-skeleton">Title</h1>

Example

Code

b.Subtitle(b.Skeleton, "Subtitle")

ResultHTML

Subtitle

<h2 class="subtitle is-skeleton">Subtitle</h2>

Example

Code

b.Subtitle(b.HasSkeleton, "Subtitle")

ResultHTML

Subtitle

<h2 class="subtitle has-skeleton">Subtitle</h2>

Example

Code

b.Title(b.Skeleton, b.Spaced, "Title"),
b.Subtitle(b.Skeleton, "Subtitle")

ResultHTML

Title

Subtitle

<h1 class="title is-skeleton is-spaced">Title</h1>
<h2 class="subtitle is-skeleton">Subtitle</h2>

Example

Code

b.Title(b.HasSkeleton, b.Spaced, "Title"),
b.Subtitle(b.HasSkeleton, "Subtitle")

ResultHTML

Title

Subtitle

<h1 class="title has-skeleton is-spaced">Title</h1>
<h2 class="subtitle has-skeleton">Subtitle</h2>

Form control

Example

Code

b.InputText(b.Skeleton)

ResultHTML

<input class="input is-skeleton" type="text">

Example

Code

b.Textarea(b.Skeleton)

ResultHTML

<textarea class="textarea is-skeleton"></textarea>

Skeletons in bulma

Bulma examples

Skeleton block

Skeleton lines

Bulma components with skeletons

Button

Icon

Image

Media object

Notification

Tag

Title and subtitle

Title

Title

Subtitle

Subtitle

Title

Subtitle

Title

Subtitle

Form control