Гиф анимация для css

Анимация загрузки страницы в CSS и GIF: назначение, как создать и примеры

Анимация загрузки сайта — это небольшой инструмент, чтобы удержать внимание потенциальных пользователей. Редко какой веб-сайт загружается мгновенно. Обычно на процесс загрузки уходит какое-то время, пока загрузятся скрипты, картинки, стили и др. В момент загрузки всех компонентов страницы она видоизменяется. Этот процесс не всегда очень красивый, поэтому его скрывает анимация загрузки страницы.

По сути, анимация загрузки сайта — это то , что вид ит пользователь, пока веб-сайт загружается. Она представляет собой псевдо страницу, перекрывающую весь экран устройства на время загрузки основной страницы веб-сайта. На этой псевдо страниц е можно отразить что угодно, но обычно на ней показывают какую-нибудь анимированную фигуру. Такая псевдо страница сразу исчезает, когда основная страница сайта загру жается .

Анимация загрузки сайта делается при помощи HTML, CSS и немного JavaScript, также иногда применяют GIF или SVG-картинку.

Анимация загрузки сайта

• на «чистом» CSS;
• при помощи анимированной GIF-картинки;
• при помощи анимированной SVG-картинки.

Анимация загрузки на «чистом» CSS

• animationLoader — это контейнер, занимающий весь экран устройства ; именно он «прикрывает» содержимое страницы;
• animationLoader_low и animationLoader_item — это контейнеры, участвующие в создании анимации при помощи CSS.

Анимация загрузки сайта при помощи SVG-картинки

Анимация загрузки страницы при помощи GIF-картинки

Алгоритм действий будет , как и в предыдущих способах , состоять из трех этапо в , но уже с измененным кодом.

HTML-код:

CSS-код:

.animationLoader

position: fixed;

left: 0;

top: 0;

right: 0;

bottom: 0;

overflow: hidden;

background: #fff;

z-index: 1001;

>

.animationLoader __image

position: relative;

top: 50%;

left: 50%;

width: 74px;

height: 74px;

margin-top: -42px;

margin-left: -42px;

background: url(‘animationLoader .gif’) no-repeat 50% 50%; /*в ссылке указываете путь до GIF-картинки, расположенной на вашем сайте*/

>

.lanimation_hiding . animationLoader

transition: 0.3s opacity;

opacity: 0;

>

. animation . animationLoader

display: none;

>

JavaScript-код будет точно таким же , как и в первых двух случаях.

Заключение

Анимация загрузки создается несложно. Сложнее всего ее создавать при помощи «чистого» CSS, так как нужно знать технологию применения таблиц стилей для анимации. Анимация загрузки веб-страницы нужна, чтобы скрыть «некрасивую» загрузку основного контента за ширмой из приятных глазу эффектов.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Источник

113 Beautiful CSS Animation Examples

Here are some of the most beautiful CSS animation examples for you.

You may also like

• 75 CSS Text Animations You Can Use
• 15 Amazing CSS Animated Background for you to try
• 57 Beautiful CSS Cards examples to improve your UI
• 19 Cool CSS Loading Animation to inspire you
• 17 Fancy CSS Search Boxes
• 21 Modern CSS menu examples
• 19 Stylish CSS forms
• 23 Fantastic CSS Hover Effects
• 19 CSS Border Animations you can implement
• 15 Stylised CSS Tables
• 13 Pure CSS Dropdown Menus
• 15 Creative CSS Filter Examples
• 35 Unique CSS Text Effects
• 15 CSS Sliders you can use
• 21 New Bootstrap Login Forms for you
• 19 Bootstrap Profiles you can use for yourself
• 13 Material Design Login Forms
• 35 Cool CSS Select Boxes
• 15 CSS Range Sliders you can use today
• 35 Creative use of CSS clip-path examples
• 29 Unique CSS Toggle Switches

Cloudy Spiral CSS animation

Dev: Hakim El Hattab

Parallax Star background in CSS

Dev: Saransh Sinha

Pure CSS 3D Sphere

See the Pen Pure CSS 3D Sphere by Sergej Skrjanec (@iamlark) on CodePen.

Dev: Sergej Skrjanec

Neumorphism animation

Dev: masuwa

CSS Animation Material Design

Dev: Zoë Bijl

Источник

60 inspiring Loading Animations (CSS and JavaScript)

Looking for creative and inspiring CSS loading animations to bridge website wait times? Our selection of the most innovative CSS spinners is the perfect solution. Discover how these loading animations can enhance your web applications and keep your users engaged with seamless loading experiences.

Sometimes it takes a few seconds for a complex website or application to load. So that your visitor knows that something is happening, you should definitely include a loading animation – this is also quite simple, as I will demonstrate at the end of the post with a short video.

If you like a loading animation, you can simply copy&paste 🙂

The pens shown are licensed with MIT. You can find more info about your own use on the Codepen Blog.

#1 Dump Truck Loading Animation

Author: Jon Kantner;
Coded in: HTML, CSS (SCSS), JS;

#2 Square in a circle – Loading Animation

Author: Ray;
Coded in: HTML, CSS (SCSS);

#3 Rainbow Loader

Author: Jack Rugile;
Coded in: HTML, CSS;

#4 CSS Text filling with water

Author: Lucas Bebber;
Coded in: HTML, CSS (SCSS);

#5 Single Element CSS-Only Absolute Center Overlay Spinner

Author: MattIn4D;
Coded in: HTML, CSS;

#6 Material Design Spinner

Author: Fran Pérez;
Coded in: HTML, CSS (SCSS);

#7 Loading

See the Pen Loading by dissimulate (@dissimulate) on CodePen.

Author: dissimulate;
Coded in: HTML, CSS;

#8 Cog loading animation

Author: Jamie Coulter;
Coded in: HTML (Haml), CSS (SCSS);

#9 Cube loading animation

Author: Paul Grant;
Coded in: HTML, CSS (SCSS);

#10 CSS loading animation 12

Author: Martin van Driel;
Coded in: HTML, CSS;

#11 Loading Animation

Author: Ioic;
Coded in: HTML, CSS (SCSS);

#12 Pacman loading animation in one div

Author: Iddar Olivares;
Coded in: HTML, CSS (Less);

#13 Loading Animation CSS

Author: Tatsuya Azegami;
Coded in: HTML, CSS (SCSS);

#14 CSS Dash Loader

See the Pen CSS Dash Loader by Cassidy Williams (@cassidoo) on CodePen.

Author: Cassidy Williams;
Coded in: HTML, CSS;

#15 Compose loading animation

Author: Brandon Mathis;
Coded in: HTML, CSS (SCSS);

#16 CSS Loading Animation

Author: John Urbank;
Coded in: HTML (Haml), CSS (Sass);

#17 Only CSS Loader – Wizard

Author: Guilmain Dorian;
Coded in: HTML (Pug), CSS (SCSS);

#18 Random geometric shapes loading animation

Author: Tony Banik;
Coded in: HTML (Slim), CSS (SCSS), JS;

#19 Canvas loading animation

Author: Rachel Smith;
Coded in: HTML, CSS (SCSS), JS;

#20 XBox SmartGlass Loading Animation

Author: Adam Argyle;
Coded in: HTML (Pug), CSS (Stylus);

#21 Loading Animation MySensors

Author: Edoardo;
Coded in: HTML, CSS (SCSS);

#22 CSS Pancake Loader

Author: Dario Corsi;
Coded in: HTML, CSS (SCSS);

#23 Loading Animation

Author: John Heiner;
Coded in: HTML, CSS (SCSS);

#24 Rotate / Pulse Loading Animation

Author: Colin Horn;
Coded in: HTML, CSS (SCSS), JS;

#25 CSS Loading Animation

Author: Glen Cheney;
Coded in: HTML (Haml), CSS (SCSS), JS;

#26 Authentic Weather Loader

Author: Tim Holman;
Coded in: HTML, CSS (SCSS);

#27 Loading Animation with Morphing SVG

Author: Heather Buchel;
Coded in: HTML, CSS (SCSS);

#28 CSS open store animation

Author: Mariana Beldi;
Coded in: HTML, CSS;

#29 CSS Loading Animation

Author: Ahmad Emran;
Coded in: HTML, CSS;

#30 Cat Loader

Author: Claudia;
Coded in: HTML, CSS (SCSS), JS (TweenMax.js);

#31 Button Loading Animation

Author: Joshua Ward;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#32 Floating Loading Animation

Author: Mario Duarte;
Coded in: HTML, CSS (SCSS);

#33 Organic Button

Author: Rik Schennink;
Coded in: HTML, CSS (SCSS), JS;

#34 Switch loading animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (jQuery);

#35 Download progress animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#36 CSS3 Loading animations

Author: Manoz;
Coded in: HTML, CSS;

#37 CSS3 Loader & Spinners

Author: Vineeth.TR;
Coded in: HTML (Pug), CSS (SCSS);

#38 Download Button Animation

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#39 Cat loader

Author: Rplus;
Coded in: HTML (Pug), CSS (SCSS);

#40 Loading

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Author: Vladislav Trefil;
Coded in: HTML (Pug), CSS (Sass), JS (jQuery);

#41 Glitch Loading Indicator

Author: Jack Rugile;
Coded in: HTML, CSS, JS (jQuery, lettering.js);

#42 Colored Loader

See the Pen Untitled by Dave McCarthy (@AsLittleDesign) on CodePen.

Author: Dave McCarthy;
Coded in: HTML (Haml), CSS (Sass);

#43 Interactive Skate Loading

Author: Aaron Iker;
Coded in: HTML, CSS (SCSS), JS (GSAP);

#44 CSS Loading Animations

Author: Alex;
Coded in: HTML, CSS;

#45 Pikachu Loading Page

Author: Hazem Ashraf;
Coded in: HTML, CSS, JS (jQuery);

#46 Spinners using Font Icons

Author: Keyamoon;
Coded in: HTML, CSS;

#47 TRON Spinner

Author: simurai;
Coded in: HTML, CSS (SCSS);

#48 SpinKit

See the Pen SpinKit by Nicola Pressi (@ibanez182) on CodePen.

Author: Nicola Pressi;
Coded in: HTML (Haml), CSS (SCSS);

#49 Loader

See the Pen Loader by Vallée Antoine (@Antoine-360pixel) on CodePen.

Author: Vallée Antoine;
Coded in: HTML, CSS (SCSS);

#50 CSS3 Loading Spinner

Author: Matthew Roelle;
Coded in: HTML (Haml), CSS (Sass);

#51 Loading animation by Kayleigh

See the Pen Loading animation by Kayleigh Foley (@kayfo23) on CodePen.

Author: Kayleigh Foley;
Coded in: HTML, CSS, JS (gsap.js, DrawSVGPlugin3.js);

#52 Loading animation by Mohamed

See the Pen Loading Animation by Mohamed Yousef (@Freeps2) on CodePen.

Author: Mohamed Yousef;
Coded in: HTML, CSS;

#53 HTML ve CSS ile Loading Animation | 10

Author: 1kodum;
Coded in: HTML, CSS;

#54 HTML ve CSS ile Loading Animation | 7

Author: 1kodum;
Coded in: HTML, CSS;

#55 HTML ve CSS ile Loading Animation | 8

Author: 1kodum;
Coded in: HTML, CSS;

#56 HTML ve CSS ile Loading Animation Tasarlama | 2

Author: 1kodum;
Coded in: HTML, CSS;

#57 HTML ve CSS ile Loading Animation | 5

Author: 1kodum;
Coded in: HTML, CSS;

#58 HTML ve CSS ile Loading Animation | 4

Author: 1kodum;
Coded in: HTML, CSS;

#59 Flight Loading Animation

Author: Dinesh Basnet;
Coded in: HTML, CSS;

#60 Nvidia Loading Animation

Author: gambhirsharma;
Coded in: HTML, CSS;

How to add the JS & CSS loading animation to your website

Conclusion

Which loading animation did you like best? If you have also published a loading animation on codepens, please let me know so that I can expand this list! 🙂

Note: All buttons are all published on codepen.io and not by me.

Still not enough? Then this could be something for you:

Источник