oursolutionarchitectoursolutionarchitect
  • Selected Reading
  • Q&A

CSS Attribute Selectors

Style HTML Elements With Specific Attributes It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector The following example selects all elements with a target attribute:

  • The [attribute] selector is used to select elements with a specified attribute.

  • 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.

Example

Here is an example for creating a loader using CSS:

<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>

Here is an example for creating a loader 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>

Here is an example for creating a loader using properties 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,
   .loader:before,
   .loader:after{
      background: conic-gradient(red, yellow, green);
   }
   .loader:before,
   .loader:after{
      content: "";
      transform: rotate(30deg);
   }
   .loader: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.

Here is an example for creating a loader:

<html>
<head>
<style>
   .loader-test {
      width: 50px;
      padding: 10px;
      aspect-ratio: 1;
      border-radius: 50%;
      margin: 20px;
      height: 50px;
      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>

There are innumerable kinds of loaders that can be created using CSS.