JSFiddle - React, Tailwind, and code Playground

by gothic

HTML

<div class="rotation rotation4"></div>
    <div class="rotation rotation3"></div>
    <div class="rotation rotation2"></div>
    <div class="rotation rotation1"></div>

CSS

.rotation {
            position: relative;
            margin: 100px auto;
            width: 150px;
            height: 150px;
            background: #28DEB4;
            border-radius: 100%;
        }

        .rotation:before {
            content:'';
            display:block;
            position: relative;
            left: -18px;
            top: -18px;
            border-width: 75px;
            width: 40px;
            height: 40px;
            -webkit-transition-property: -webkit-transform;
            -webkit-transition-duration: 1s;
            -moz-transition-property: -moz-transform;
            -moz-transition-duration: 1s;
            transition-property: transform;
            transition-duration: 1s;
            border-radius: 50%;
            /*z-index: -1;*/
            -webkit-animation-name: rotate;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -moz-animation-name: rotate;
            -moz-animation-duration: 2s;
            -moz-animation-iteration-count: infinite;
            -moz-animation-timing-function: linear;
            animation-name: rotate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }
        .rotation1:before {
            border-style: solid;
            border-width: 75px;
            border-color: red blue green orange;
        }
        .rotation2:before {
            border-style: groove;
            border-width: 75px;
            border-color: orange;

        }
        .rotation3:before {
            border-style: dotted;
            border-width: 75px;
            border-color: blue;
        }
        .rotation4:before {
            border-style: dashed;
            border-width: 75px;
            border-color: green;
        }

        @-webkit-keyframes rotate {
            from {-webkit-transform:...