A couple of simple examples of loaders using only one
div
and CSS.
Usually it's common to show a loader to the users when they must wait something in a web application (an ajax request or a form submit, etc). _Gif_image loaders was great but using CSS we can avoid the image request, also it's easier for customise and maintain and it's more cool.
npm install pure-css-loader
Also you can clone the repository or download the zip file and get main CSS file that it's located in: dist/css-loader.css
.
Add the CSS file in your project and add the link to the file:
<link rel="stylesheet" href="path/to/css-loader.css">
Select the loader and add the HTML corresponding to it, To show the loader, you need to add the helper css class is-active
. And to hide the loader, it's just follow the inverse, 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: it's to add a Loading text into 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 blink
attribute, you can add a simple fade animation to the text loader
<div class="loader loader-default is-active" data-text blink></div>
See it 🤘
half: a half loader.
See it 🤘
They variations half, data-text and 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 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 blink></div>
See it 🤘
rounded: passing the rounded
attribute, it's possible to add a simple border-radius
to the loader.
<div class="loader loader-bar is-active" data-text rounded></div>
See it 🤘
<div class="loader loader-border is-active"></div>
See it 🤘
Like the loader
example, it's also possible 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 blink></div>
See it 🤘
<div class="loader loader-ball is-active"></div>
See it 🤘
shadow: a version of the ball with inset shadow.
See it 🤘
<div class="loader loader-smartphone is-active"></div>
See it 🤘
w/ screen text: it's possible to pass an attribute to loader and show a simple text inside the screen. Like the others one, if we only pass the attribute, a default loading text shows; but you can pass a custom text. Just remember that 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 🤘
- Clone this repository.
npm install
andgulp
- Open =>
https://localhost:300
- Make your magic contribution.
- 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 the CSS file has no browsers prefixes, but you can easily add and increase the support of the browsers.
MIT License © Raphael Fabeni