I have been working on a project that targets mobile WebKit browsers so it was natural to explore using -webkit-animation to handle the image rotation. That happened today when I discovered a way to make an iPhone-style spinner without any images, just CSS. window.It’s hard to stifle a smile any time I get a glimpse of the future thanks to WebKit-based browsers like Safari and Chrome (and their mobile counterparts on iOS and Android devices). Once JS code is loaded, it will run the code inside the eventlistener. Make no mistake, an external js file or should be placed behind all the HTML code so the text content would be loaded first - in this time is the spinner visible. The last part is to add code so we access the elements we're going to manipulate.įirst we add an event listener to the window, which would start the autoexecutable function on load of the content. Now we are set to JavaScript in the next section.įor the JS, we add a simple event listener to hide the loader when the image is completely loaded. Now we prepare the rest of the code, by adding id=”img” to the element img, because what we are going to do is to have an image container not displayed until it's loaded into memory. We place the spinner inside the container with the image and set it center with CSS. Now we want to do that spinner in the place of image until it loads. ![]() ![]() With this approach we can prevent also caching of the data so we can simulate better the loading time. We used larger sized images, taken from - so called lorem ipsum of images. This can be done by loading big pictures or files. Now all of this above would only serve for designing the spinner, but for actually implementing it we need a content that its loading time is actually greater than a few milliseconds. In the property animation we need to write the name of the animation which will be defined in keyframes - in this case it's “spinIT”, time to complete animation in seconds, blend mode will be linear and it will be running continuously by the last attribute called infinite.Īdditionally we decorate it with a bit of shadow.įilter: drop-shadow(0px 0px 8px spinIT Now we make it circular by adding border-radius:50% and we give color to the left border.Īt last, we add an animation to the loader class that makes the circle spin forever with a 0.8 second animation speed. Īs we can see in this picture, it's just a simple square with borders set to it. To target it in CSS it would have the class name “loader”. Our spinner is going to be a simple circle spinning around its own centre.įirst thing to do is create a single div element where the spinner would be shown. We would use codepen.io to show the building process, a great tool where you can quickly try some pieces of code. Well enough of the theories, it's time to make our own simple throbber/spinner/loader. That is how developers came to use pure CSS over GIF animations which were used a long time ago in web development. Using a CSS animation has an advantage that we are avoiding image request (.gif for example), that means the loader would be shown even if the system or transfer is slow or halted. There are many iconic throbbers like Windows wait cursor in the form of hourglass and surely you recognize this typical throbber animation, as seen on many websites. Unless there is for example added percentage numerics. Spinner is something different than progress bar, because it doesn't show how much of the action has been completed. Such a thing is many times needed also in text user interfaces, where there is no animation possible so its replaced by a fixed-width character which is cycled between “|”, “/”, “-” and “” forms in order to create an animation effect. The user is thus able to see that he/she needs to wait until the process is finished. ![]() This means the system is performing an action in the background, launching an application, processing requests, downloading content, conducting intensive calculations or communicating with an external device. ![]() Whatever they are called, they are supposed to do all the same - show an image in a program's interface which animates to show that the software is busy. Throbbers are actually the official name for them. Loading animation, Loader, Spinner, Throbber, they go by many names, sometimes misleading because they do not always spin. That can be used on a website for example when there is a request running and the result is not yet retrieved. In today's article we will show you how to animate a basic loader that spins when some predefined action is defined, such as loading an image.
0 Comments
Leave a Reply. |