Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Loaders

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      Loaders

      CSS loaders are animation effects that are used to indicate the loading process of a webpage. They are implemented using CSS and can be applied to various elements on a webpage, such as a spinner or a progress bar. CSS loaders are commonly used to improve user experience by visually indicating that content is being loaded or processed.
      Following properties of CSS are few which can be used to create a loader:
      • border: Used in specifying the size and color of the border of the loader.
      • border-radius: Used in specifying the shape of the loader. For example: border-radius:50% makes the loader a circle.
      • border-top, border-bottom, border-left and/or border-right: Used to indicate the direction from which the loader should spin.
      • width: Used to specify the width of the loader.
      • height: Used to specify the height of the loader.
      • animation: Used to specify the time taken to spin, by the loader.
      • @keyframes: @keyframes rule is used to specify the animation rule. It can contain the keywords such as from and to, which means 0% and 100% respectively; where 0% is beginning of the animation and 100% is completion of it.
      • transform: The function transform is used to specify the rotational degree for the loader.
      • mask / mask-composite: Used in creating a final shape of the loader.
      You need to add the -webkit- prefix in your code for the browsers that do not support the animation and transform properties.

      Creating Loader

      To create a loader using CSS, follow these steps:
      • Create a div element for displaying the loader.
      • Use CSS styling for the loader, declare a class for it say for example class .demo-loader.
      • Set the width and height of the loader.
      • Set the border, border-radius or individual side borders of the loader.
      • Set the animation rule for the loader, using the @keyframes rule.
      • Use the prefix -webkit for the browsers that don't support the animation and transform properties.
      • Call this class (.demo-loader) in your div element within the body tag.
      You may use various colour combinations, shape, patterns and animation tricks for the loader. Play around with CSS properties to create your loader.
      There are innumerable kinds of loaders that can be created using CSS. In the following section we see few examples.

      CSS Loaders - Basic Example

      Following example demonstartes creating a loader using CSS as discussed in the previous section:
      <html>
      <head>
      <style>
         .loader-test {
            border: 20px solid #110101;
            border-radius: 60%;
            border-top: 20px solid #f10c18;
            border-right: 20px solid yellow;
            border-bottom: 20px solid blue;
            border-left: 20px solid green;
            width: 50px;
            height: 50px;
            -webkit-animation: spin 5s linear infinite;
            animation: spin 5s linear infinite;
         }
         @keyframes spin {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
         }
      </style>
      </head>
      <body>
         <h2>CSS Loader</h2>
         <div class="loader-test"></div>
      </body>
      </html>

      CSS Loaders - With border-right Property

      Following example demonstartes creating a loader using using just one border shorthand property border-right:
      <html>
      <head>
      <style>
         .loader-test {
            border: 20px solid #110101;
            border-radius: 60%;
            border-right: 20px solid red;
            width: 50px;
            height: 50px;
            -webkit-animation: spin 2s linear infinite;
            animation: spin 2s linear infinite;
         }
         @keyframes spin {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
         }
      </style>
      </head>
      <body>
         <h2>CSS Loader</h2>
         <div class="loader-test"></div>
      </body>
      </html>

      CSS Loaders - With :before and :after

      Following example demonstartes creating a loader using pseudo elements such as :before and :after:
      <html>
      <head>
      <style>
         .loader-test {
            width: 100px; /* control the size */
            aspect-ratio: 1;
            -webkit-mask: conic-gradient(red, yellow, green);
            mask: conic-gradient(red, yellow, green);
            animation: spin 2s steps(12) infinite;
         }
         .loader-test,
         .loader-test:before,
         .loader-test:after{
            background: conic-gradient(red, yellow, green);
         }
         .loader-test:before,
         .loader-test:after{
            content: "";
            transform: rotate(30deg);
         }
         .loader-test:after{
            transform: rotate(60deg);
         }
         @keyframes spin {
            from {transform: rotate(0turn)}
            to   {transform: rotate(1turn)}
         }
         div {
            margin: 20px;
            width: 100px;
            height: 100px;
            place-content: center;
            place-items: center;
         }
      </style>
      </head>
      <body>
         <h2>CSS Loader</h2>
         <div class="loader-test">
      </div>
      </body>
      </html>
      Always specify both the 0% and the 100% selectors, for best browser support.

      CSS Loaders - With linear-gradient

      Here is another example of creating a loader:
      <html>
      <head>
      <style>
         .loader-test {
            width: 50px;
            height: 50px;
            padding: 10px;
            aspect-ratio: 1;
            border-radius: 50%;
            margin: 20px;       
            background: linear-gradient(10deg,#ccc,red);
            -webkit-mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
            mask: conic-gradient(#0000,#000), linear-gradient(#000 0 0) content-box;
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
            animation: load 1s linear infinite;
         }
         @keyframes load {
            to{transform: rotate(1turn)}
         }
      </style>
      </head>
      <body>
         <h2>CSS Loader</h2>
         <div class="loader-test"></div>
      </body>
      </html>