You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
[Try it online! :metal:](http://www.raphaelfabeni.com.br/css-loader/)
8
8
9
9
## Why
10
10
11
-
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.
11
+
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.
12
12
13
13
## toc
14
14
@@ -31,17 +31,17 @@ Usually it's common to show a loader to the users when they must wait something
31
31
npm install pure-css-loader
32
32
```
33
33
34
-
Also you can clone the repository or [download the zip file](https://github.com/raphaelfabeni/css-loader/archive/master.zip) and get main *CSS* file that it's located in: `dist/css-loader.css`.
34
+
Also you can clone the repository or [download the zip file](https://github.com/raphaelfabeni/css-loader/archive/master.zip) and get the main *CSS* file that is located in: `dist/css-loader.css`.
35
35
36
36
## Setup
37
37
38
-
Add the CSS file in your project and add the link to the file:
38
+
Add the CSS file to your project and add the link to the file:
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.
44
+
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.
45
45
46
46
```html
47
47
<!-- Loader -->
@@ -65,7 +65,7 @@ Select the loader and add the HTML corresponding to it, To show the loader, you
65
65
66
66
#### Variations
67
67
68
-
**data-text**: it's to add a _Loading_ text into the loader. Just add the `data-text` attribute.
68
+
**data-text**: add a _Loading_ text to the loader. Just add the `data-text` attribute.
@@ -199,7 +199,7 @@ Like the `loader` example, it's also possible pass the `data-text` and `blink` a
199
199
200
200
#### Variations
201
201
202
-
*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).
202
+
*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).
203
203
204
204
```html
205
205
<!-- default loading text -->
@@ -227,7 +227,7 @@ Like the `loader` example, it's also possible pass the `data-text` and `blink` a
227
227
228
228
1. Clone this repository.
229
229
2.`npm install` and `gulp`
230
-
3. Open => `http://localhost:300`
230
+
3. Open => `http://localhost:3000`
231
231
4. Make your magic contribution.
232
232
5. Open a _PR_ with a new branch describing your changes. <o/
233
233
@@ -239,9 +239,9 @@ All examples use CSS _animation_ which is supported by [most current browsers](h
239
239
|:---:|:---:|:---:|:---:|:---:|:---:|
240
240
| 43+ ✔ | 16+ ✔ | 10+ ✔ | 30+ ✔ | 9+ ✔ | 5.2+ ✔
241
241
242
-
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.
242
+
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.
0 commit comments