Mes liens
796 shaares
5 results
tagged
Loading
Include pace.js and the theme css of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.
No need to hook into any of your code, progress is detected automatically.
No need to hook into any of your code, progress is detected automatically.
Today we’d like to show you some ideas for creative loading effects. Nowadays, many different page loading animations are used in websites; just think of the subtle red loading bar seen on YouTube. When loading something on a page, be it images or the next content, we don’t have to be restricted to a tiny loading indicator but we can get creative and big. So the idea is to indicate that something is happening in a stylish way without creating too much distraction for the user. There might be actions where this might not be adequate, but in some situations it might be quite fitting and amplifying for the overall design.
Please note that the examples only serve as inspiration, they are dummies and not meant for production. You’ll have to use the transitions or animation together with a custom JavaScript solution.
Please note that the examples only serve as inspiration, they are dummies and not meant for production. You’ll have to use the transitions or animation together with a custom JavaScript solution.
Modular programming is used to break large applications into smaller blocks of manageable code. Module based coding eases the effort for maintenance and increases reusability. However, managing dependencies between modules is a major concern developers face throughout the application development process. RequireJS is one of the most popular frameworks around for managing dependencies between modules. This tutorial examines the need for modularized code, and shows how RequireJS can help.
Today, we are going to do a lot of stuff with CSS animations. Indeed, we will talk about CSS loading animations. What do you say? Ready?
A few things before we start:
- You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
- The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-. If you plan to support these browsers, be sure to make fallbacks.
- I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
A few things before we start:
- You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.
- The goal of the tutorial is to show the potential of CSS, particularly CSS3, that’s why the rendering could be altered on IE9-. If you plan to support these browsers, be sure to make fallbacks.
- I personally use the box-model where [width] = [element-width] + [padding] + [borders]. I activate it with the following snippet:
In our new tutorial I will show you how to create pure CSS3 loading elements (without any images). I think that it can be interesting for you in order to decrease amount of extra images in your project. I prepared three different loading elements. Now, lets check how I made them.