A few simple examples of loaders using only one
div
and CSS.
It's usually common to show a loader to users when they must wait for something in a web application (an ajax request or a form submit, etc). Gif image loaders were great but by using CSS we can avoid the image request, also it's easier to customise and maintain and it's cooler.
npm install pure-css-loader
Also you can clone the repository or download the zip file and get the main CSS file that is located in: dist/css-loader.css
.
Add the CSS file to your project and add the link to the file:
<link rel="stylesheet" href="path/to/css-loader.css">
Select the loader and add the corresponding HTML. In order to show the loader, you need to add the helper CSS class is-active
. And to hide the loader, just do the opposite, removing the CSS helper from the loader. You can do it with JavaScript.
<!-- Loader -->
<div class="loader loader-default"></div>
<!-- Loader active -->
<div class="loader loader-default is-active"></div>
<div class="loader loader-default is-active"></div>
See it ๐ค
data-text: add a Loading text to the loader. Just add the data-text
attribute.
<div class="loader loader-default is-active" data-text></div>
See it ๐ค
It's also possible to change the text, just passing a value to the attribute data-text
.
<div class="loader loader-default is-active" data-text="Custom text"></div>
blink: passing the data-blink
attribute, you can add a simple fade animation to the text loader
<div class="loader loader-default is-active" data-text data-blink></div>
See it ๐ค
half: a half loader.
See it ๐ค
The variations data-half, data-text and data-blink work together. ๐
<div class="loader loader-double is-active"></div>
See it ๐ค
<div class="loader loader-bar is-active"></div>
See it ๐ค
Like the loader
example, it's also possible to pass the data-text
and blink
attributes.
<div class="loader loader-bar is-active" data-text></div>
<!-- -->
<div class="loader loader-bar is-active" data-text="Custom text"></div>
<!-- -->
<div class="loader loader-bar is-active" data-text data-blink></div>
See it ๐ค
rounded: passing the data-rounded
attribute, it's possible to add a simple border-radius
to the loader.
<div class="loader loader-bar is-active" data-text data-rounded></div>
See it ๐ค
<div class="loader loader-border is-active"></div>
See it ๐ค
Like the loader
example, it's also possible to pass the data-text
and blink
attributes.
<div class="loader loader-border is-active" data-text></div>
<!-- -->
<div class="loader loader-border is-active" data-text="Custom text"></div>
<!-- -->
<div class="loader loader-border is-active" data-text data-blink></div>
See it ๐ค
<div class="loader loader-ball is-active"></div>
See it ๐ค
shadow: a version of the ball with inset shadow.
<div class="loader loader-ball is-active" data-shadow></div>
See it ๐ค
<div class="loader loader-smartphone is-active"></div>
See it ๐ค
w/ screen text: it's possible to pass an attribute to the loader and show a simple text inside the screen. Like the other one, if we only pass the attribute, a default loading text is shown; but you can pass a custom text. Just remember that it can't be a big word (our smartphone screen is small).
<!-- default loading text -->
<div class="loader loader-smartphone is-active" data-screen></div>
<!-- custom text -->
<div class="loader loader-smartphone is-active" data-screen="hello"></div>
See it ๐ค
<div class="loader loader-clock is-active"></div>
See it ๐ค
<div class="loader loader-curtain is-active"></div>
See it ๐ค
brazilian: a simple version using the traditional brazilian green and yellow. ๐ง๐ท
<div class="loader loader-curtain is-active" data-brazilian></div>
See it ๐ค
colorful: a colorful version.
<div class="loader loader-curtain is-active" data-colorful></div>
See it ๐ค
w/ custom text: it's also possible customize the text loader. It's just pass the data attribute data-curtain-text
with the value desired.
<div class="loader loader-curtain is-active" colorful data-curtain-text="Hello"></div>
<div class="loader loader-music is-active" data-hey-oh></div>
This loader differs from the other because we have to pass an attribute to it, according to song's chorus that we want to load.
hey-oh: The classic Hey! Oh! Let's Go! from Ramones.
<div class="loader loader-music is-active" data-hey-oh></div>
See it ๐ค
no-cry: No woman no cry from Bob Marley.
<div class="loader loader-music is-active" data-no-cry></div>
See it ๐ค
we-are: We are the world from Michael Jackson.
<div class="loader loader-music is-active" data-we-are></div>
See it ๐ค
rock-you: We will rock you from Queen.
<div class="loader loader-music is-active" data-rock-you></div>
See it ๐ค
- Clone this repository.
npm install
andgulp
- Open =>
http://localhost:3000
- Make your magic contribution.
- Run
gulp lint
to run the tests (Fix if have some errors; more info in.sass-lint.yml
). - Run
gulp build
to create/update the dist files. - Open a PR with a new branch describing your changes. <o/
All examples use CSS animation which is supported by most current browsers.
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
43+ โ | 16+ โ | 10+ โ | 30+ โ | 9+ โ | 5.2+ โ |
Based on Can i Use. One thing to note is that the CSS file has no browser prefixes, but you can easily add them and increase the browser support.
MIT License ยฉ Raphael Fabeni