Animation for SVG loader using CSS3

Egor Polyakov26 July 2019 Technologies:HTMLCSS3SVG

Task

To create the rounded loader using SVG element for UI of PC/Mac program, web and mobile applications.

Intro

Each new digital product using innovations at first will be look new as UI to say a new client that it smarter and more useful that other products in your user experience.

One of the useful features for UI is loading process & progress bar included in this functional element. It can helps to presents the pause or delay in time of data transfers between screen and system.

Retina screens in high resolution is looks better in touch with SVG elements of UI.

Loading in motion is visually looks more actual in retina quality.

Scalable format SVG is most attractive for design of UI on mobile and other touchscreen devices.

In case of useful and responsive UI as theme of lesson lets start to design the animation for SVG loader using complex figures with progress bar in center of them.

Example

At this lesson we use Flat UI Colors for right choice of dynamic elements in design of loading screen.

Colors of loader
Elements of loading figures Colors HEX codes
Outer circle #1 Deep green Nephritis #27ae60
Outer circle #2 Light green Emerald #2ecc71
Inner circle element #1 Green Sea #16a085
Inner circle element #2 Turquoise #1abc9c

Radial motion of SVG elements using deep and light colors in visual animation.

Elements of SVG on contrast looks more actual to focus user view on loading indication.

Let`s go to do it!

Create a logotype of the program or app for Android, Apple and PC versions

Scheme of layers in loading screen

Scheme of layers in loading screen.

Study step by step

  1. Construction of loading screen consist of gradient animated background, loading box, animated radial motion of SVG element and text «Loading».

    Also you can add dynamic count from 1 to 100 percents in connection of progress in application loading.

  2. Draw the SVG element by standard code of document:

  3. Using CSS3 animation for gradient background for <body> construction in preview on page in browser tooks a result: motion colored gradient on angle 45 degrees.
  4. Box in <div> construction in position of center and middle of page (using "position: absolute") rounded by style (border-radius: 200px;) and fadded background of box (using "background: rgba(0,0,0,0.3);")
  5. Full code of SVG element in body of HTML page in connection with CSS3 using animations in visual realizition looks as radial motion of colored lines in watch-count motion (from left to right by circle traectory). View code

Standard code of SVG document

Code of SVG document in syntax is like HTML with special tags and attributes for drawing figures, lines and settings for view.

Code of SVG element
  1. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" class="lessonSlide">
  2. <g>
  3. <path fill="none" stroke="#27ae60" stroke-width="3" stroke-miterlimit="10" d="M138.768,100c0,21.411-17.356,38.768-38.768,38.768 c-21.411,0-38.768-17.356-38.768-38.768c0-21.411,17.357-38.768,38.768-38.768"/>
  4. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
  5. </g>
  6. <g>
  7. <path fill="none" stroke="#2ecc71" stroke-width="3" stroke-miterlimit="10" d="M132.605,100c0,18.008-14.598,32.605-32.605,32.605 c-18.007,0-32.605-14.598-32.605-32.605c0-18.007,14.598-32.605,32.605-32.605"/>
  8. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite"/>
  9. </g>
  10. <g>
  11. <path fill="none" stroke="#16a085" stroke-width="3" stroke-miterlimit="10" d="M126.502,100c0,14.638-11.864,26.502-26.502,26.502 c-14.636,0-26.501-11.864-26.501-26.502c0-14.636,11.865-26.501,26.501-26.501"/>
  12. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite"/>
  13. </g>
  14. <g>
  15. <path fill="none" stroke="#1abc9c" stroke-width="3" stroke-miterlimit="10" d="M120.494,100c0,11.32-9.174,20.494-20.494,20.494 c-11.319,0-20.495-9.174-20.495-20.494c0-11.319,9.176-20.495,20.495-20.495"/>
  16. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"/>
  17. </g>
  18. </svg>

Resulted code for visual animation of loading

Code of HTML document and included SVG code plus animations in CSS3 is short and usefull (because dont needs JavaScript for dynamic motion).

Code of loading screen
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
  6. <script type="text/javascript" src="/intro/js/jquery.js"></script>
  7. <title>Loading screen</title>
  8. </head>
  9. <body>
  10. <div class="gradient loading-page">
  11. <div class="counter fadeIn">
  12. <span class="loading">Loading</span>
  13. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
  14. <g>
  15. <path fill="none" stroke="#27ae60" stroke-width="3" stroke-miterlimit="10" d="M138.768,100c0,21.411-17.356,38.768-38.768,38.768 c-21.411,0-38.768-17.356-38.768-38.768c0-21.411,17.357-38.768,38.768-38.768"/>
  16. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="8s" repeatCount="indefinite"/>
  17. </g>
  18. <g>
  19. <path fill="none" stroke="#2ecc71" stroke-width="3" stroke-miterlimit="10" d="M132.605,100c0,18.008-14.598,32.605-32.605,32.605 c-18.007,0-32.605-14.598-32.605-32.605c0-18.007,14.598-32.605,32.605-32.605"/>
  20. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="4s" repeatCount="indefinite"/>
  21. </g>
  22. <g>
  23. <path fill="none" stroke="#16a085" stroke-width="3" stroke-miterlimit="10" d="M126.502,100c0,14.638-11.864,26.502-26.502,26.502 c-14.636,0-26.501-11.864-26.501-26.502c0-14.636,11.865-26.501,26.501-26.501"/>
  24. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="2s" repeatCount="indefinite"/>
  25. </g>
  26. <g>
  27. <path fill="none" stroke="#1abc9c" stroke-width="3" stroke-miterlimit="10" d="M120.494,100c0,11.32-9.174,20.494-20.494,20.494 c-11.319,0-20.495-9.174-20.495-20.494c0-11.319,9.176-20.495,20.495-20.495"/>
  28. <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" dur="1s" repeatCount="indefinite"/>
  29. </g>
  30. </svg>
  31. </div>
  32. </div>
  33. <style>
  34. @import "compass/css3";
  35. body{
  36. width:100%;
  37. height:100%;
  38. background:#27ae60;
  39. color:#fff;
  40. font-family:Roboto, sans-serif;
  41. font-size:120px;
  42. padding:0;
  43. margin:0;
  44. }
  45. span.loading {
  46. position: absolute;
  47. top: 30px;
  48. right: 80px;
  49. z-index: 1000;
  50. width: 120px;
  51. height: 40px;
  52. font-size: 32px;
  53. line-height: 1em;
  54. }
  55. div.gradient {
  56. width:100%;
  57. height:100%;
  58. position:fixed;
  59. background: linear-gradient(-45deg, #234431, #27ae60, #16a085, #1abc9c);
  60. background-size: 400% 400%;
  61. -webkit-animation: Gradient 15s ease infinite;
  62. -moz-animation: Gradient 15s ease infinite;
  63. animation: Gradient 15s ease infinite;
  64. }
  65. @-webkit-keyframes Gradient {
  66. 0% {
  67. background-position: 0% 50%
  68. }
  69. 50% {
  70. background-position: 100% 50%
  71. }
  72. 100% {
  73. background-position: 0% 50%
  74. }
  75. }
  76. @-moz-keyframes Gradient {
  77. 0% {
  78. background-position: 0% 50%
  79. }
  80. 50% {
  81. background-position: 100% 50%
  82. }
  83. 100% {
  84. background-position: 0% 50%
  85. }
  86. }
  87. @keyframes Gradient {
  88. 0% {
  89. background-position: 0% 50%
  90. }
  91. 50% {
  92. background-position: 100% 50%
  93. }
  94. 100% {
  95. background-position: 0% 50%
  96. }
  97. }
  98. .counter{
  99. position: relative;
  100. left: calc(50% - 150px);
  101. top: calc(50% - 45px);
  102. border: none;
  103. width: 260px;
  104. height: 80px;
  105. border-radius: 100px;
  106. padding: 10px 0 0 40px;
  107. overflow: hidden;
  108. background: rgba(0,0,0,0.3);
  109. border-radius: 200px;
  110. z-index: 1000;
  111. }
  112. $skew:20deg;
  113. .counter-value{
  114. position:absolute;
  115. transform-origin:0 100%;
  116. transform:skew($skew,0);
  117. z-index:1000;
  118. overflow:hidden;
  119. //border:1px dotted green;
  120. padding-right:30px;
  121. height:1em;
  122. }
  123. .counter-value-mask{
  124. position:absolute;
  125. transform-origin:0 100%;
  126. transform:skew(-$skew);
  127. //border:1px dotted pink;
  128. overflow:hidden;
  129. line-height:1em;
  130. z-index:1000;
  131. }
  132. svg{
  133. position: relative;
  134. top: -58px;
  135. left: -94px;
  136. zoom: 85%;
  137. z-index: 1000;
  138. }
  139. /* make keyframes that tell the start state and the end state of our object */
  140. @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  141. @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  142. @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
  143. .fade-in {
  144. opacity:0; /* make things invisible upon start */
  145. -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
  146. -moz-animation:fadeIn ease-in 1;
  147. animation:fadeIn ease-in 1;
  148. -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
  149. -moz-animation-fill-mode:forwards;
  150. animation-fill-mode:forwards;
  151. -webkit-animation-duration:1s;
  152. -moz-animation-duration:1s;
  153. animation-duration:1s;
  154. }
  155. </style>
  156. </body>
  157. </html>
Preview of result

Conclusions after the lesson

Complex using CSS3 animations for background and loading SVG elements in touch of radial motion in design presents visual action of loading process.

Animated background, counter box, animated loading SVG element and text «Loading» in complex view of layers visually is actual and available for use as loading screen for application on responsive screens (PC/Mac, iPad, mobile devices).

Tutorial video «How it works»

Watch a tutorial video to have the first practice and knowledge about SVG Generator.

Have any questions?

We can helps you at all questions:
read more about instruments and frequently asked questions.

Ask question

Working process: step by step

← View all lessons
Share link:
Hello! We can help you.Please, choose from list.
Open FAQ for reading Ask question View tutorial video Preview Premium Graphics
Ask your questionAnswer will be in the next 24 hours.
Main questionsPlease, choose from list.
Ask question
Tutorial videofor Inmotus SVG Generator
Ask question