vue-intergrall-plugins 0.0.4 → 0.0.8

package/src/lib-components/Chat/TextFooter.vue

@@ -1,78 +1,81 @@
 <template>
-  <div class="text-footer-container" v-on-clickaway="away" v-if="textId">
+  <div class="text-footer-container" v-on-clickaway="away" v-if="textId" @drop.stop="dropFile" @dragenter.prevent @dragover.prevent>
     <div class="text-footer" :class="cssStyle.width ? cssStyle.width: ''" :style="`background-color: ${cssStyle.backgroundColor}`">
-      <emojis-text-footer :ref="`${this.textId}`" :emojiId="`${this.textId}`" v-if="buttons.hasEmojis  && !audioFile" :down="emojiSettings.openEmojisFrom == 'top' ? false : true" :small="emojiSettings.smallEmojis" @insert-emoji="insertEmoji"></emojis-text-footer>
+      <EmojisTextFooter 
+        v-show="buttons.hasEmojis && !audioFile"
+        :ref="`${this.textId}`"
+        :emojiId="`${this.textId}`"
+        :down="emojiSettings.openEmojisFrom == 'top' ? false : true"
+        :small="emojiSettings.smallEmojis"
+        @insert-emoji="insertEmoji"
+      />
       <transition name="fade">
-        <req-loader v-if="isSending" />
+        <Loader v-if="isSending" />
       </transition>
-      <textarea v-if="!audioFile" :id="`text-footer-${this.textId}`" @input="sendFinalMessage" v-model="message" @keydown.up="toggleHSM" @keydown.down="toggleHSM" @keydown.esc="closeEmojis" @keydown.enter="sendMessageHandler" :disabled="textareaSettings.disabled" :placeholder="textareaSettings.placeholderMessage" @paste="pasteImage" class="js-autoresize"></textarea>
+      <textarea 
+        class="js-autoresize"
+        v-if="!audioFile"
+        v-model="message"
+        :id="`text-footer-${this.textId}`"
+        :disabled="textareaSettings.disabled"
+        :placeholder="textareaSettings.placeholderMessage"
+        @input="sendFinalMessage"
+        @keydown.up="toggleHSM"
+        @keydown.down="toggleHSM"
+        @keydown.esc="closeEmojis"
+        @keydown.enter="sendMessageHandler"
+        @paste="pasteImage"
+      ></textarea>
       <div class="text-footer-audio" v-else>
         <audio :src="audioSource" controls="controls"></audio>
         <span class="delete-audio" title="Cancelar" @click="deleteAudio">
           <fa-icon :icon="['fas', 'times']" />
         </span>
       </div>
-      <span class="max-characters no-width" :class="{'d-none' : audioFile}" v-if="textareaSettings.maxCharacters" v-text="`(${this.remainingCharacters})`"></span>
+      <RemainingCharacters 
+        :class="{'d-none' : audioFile}"
+        :message="message"
+        :maxCharacters="textareaSettings.maxCharacters"
+      />
       <div class="text-footer-actions" v-if="buttons.hasSendButton">
         <span class="text-footer-actions--btn" :title="dictionary.title_enviar_msg" @click="sendMessageHandler">
           <fa-icon :icon="['fas', 'paper-plane']" />
         </span>
       </div>
       <div v-if="buttons.hasFiles || buttons.hasAudio" class="text-footer-actions" :class="{'outside-buttons' : cssStyle.outsideButtons && !audioFile}">
-        <span v-if="buttons.hasAudio && !audioFile" class="text-footer-actions--btn" :class="{'audio-activated' : isRecording}" @click="toggleAudioRecorder">
-          <fa-icon :icon="['fas', 'microphone']" />
-        </span>
-        <span v-if="buttons.hasFiles  && !audioFile" class="text-footer-actions--btn" :class="{'files-activated' : openFiles}" :title="dictionary.title_selecionar_anexo" @click="toggleFiles">
-          <fa-icon :icon="['fas', 'paperclip']" />
-        </span>
+        <BtnMic 
+          v-show="buttons.hasAudio && !audioFile"
+          :dictionary="dictionary"
+          @set-audio="setAudio"
+          :ref="`${textId}-mic`" 
+        />
+        <BtnFiles 
+          v-show="buttons.hasFiles && !audioFile" 
+          :textId="textId"
+          :dictionary="dictionary"
+          :fileSettings="fileSettings"
+          :cssStyle="cssStyle"
+          :ref="`${textId}-file`"
+          @set-file-vars="setFileVars"
+        />
       </div>
     </div>
-    <transition name="show">
-      <div v-if="buttons.hasFiles && openFiles" class="text-footer-files-container" :class="{'horizontal' : cssStyle.outsideButtons}">
-        <div class="files-btn images" :class="{'margin-bottom' : cssStyle.outsideButtons}" :title="dictionary.title_anexo_img" @click="selectImage">
-          <fa-icon :icon="['fas', 'image']" />
-        </div>
-        <div class="files-btn docs" :title="dictionary.title_anexo_doc" @click="selectDoc">
-          <fa-icon :icon="['fas', 'file-alt']" />
-        </div>
-        <div class="files-pointers d-none">
-          <input type="file" :id="`file-${textId}`" accept="image/*" @change="fileUpload($event, 'img')" />
-          <input type="file" :id="`doc-${textId}`" accept="application/*" @change="fileUpload($event, 'doc')" />
-        </div>
-      </div>
-    </transition>
-    <transition name="fade">
-      <div class="text-footer-preview-container" v-if="showFilePreview" :class="{'isDoc' : isDoc && !fileFormatError, 'isImg' : !isDoc && !fileFormatError, 'isError' : fileFormatError}">
-        <span @click="deleteFile" :title="dictionary.msg_cancelar_anexo" class="text-footer-exclude-file">
-          <fa-icon :icon="['fas', 'times-circle']" />
-        </span>
-        <h3 v-if="file.name" class="text-footer-preview-title">
-          <fa-icon :icon="['fas', 'file-alt']" v-if="isDoc" />
-          <fa-icon :icon="['fas', 'image']" v-else />
-          {{ file.name }}
-        </h3>
-        <div class="text-footer-invalid-format" v-if="fileFormatError">
-          <h3 v-text="dictionary.titulo_msg_formato_invalido"></h3>
-          <h4 v-text="validFileFormats"></h4>
-        </div>
-        <div class="text-footer-image-preview" v-if="imagePreview">
-          <img :src="imagePreview" :alt="dictionary.alt_previa_img" @click="openImage">
-        </div>
-      </div>
-    </transition>
   </div>
 </template>
 
 <script>
 import { setResizeListeners, resetTargets } from "@/services/autoResize"
 import { mixin as clickaway } from "vue-clickaway"
-import { returnMessageWithHexa, formataHoraMensagem } from "@/services/textFormatting"
+import { returnMessageWithHexa } from "@/services/textFormatting"
 
 import EmojisTextFooter from "./EmojisTextFooter"
-import ReqLoader from "../Loader/ReqLoader"
+import Loader from "../Loader/Loader"
+import RemainingCharacters from "./RemainingCharacters"
+import BtnMic from "./BtnMic"
+import BtnFiles from "./BtnFiles"
 
 export default {
-  components: { EmojisTextFooter, ReqLoader },
+  components: { EmojisTextFooter, Loader, BtnMic, BtnFiles, RemainingCharacters },
   mixins: [ clickaway ],
   props: {
     buttons: {
@@ -102,7 +105,7 @@ export default {
     },
     fileSettings: {
       type: Object,
-      default: () => { return { docsExtensions: "", imagesExtensions: "" } },
+      default: () => { return { docsExtensions: "", imagesExtensions: "", multiple: false } },
       required: false
     },
     textId: {
@@ -124,14 +127,6 @@ export default {
       required: true
     }
   },
-  computed: {
-    remainingCharacters() {
-      if(this.message && this.message.length) {
-        return this.textareaSettings.maxCharacters - this.message.length
-      }
-      return this.textareaSettings.maxCharacters
-    }
-  },
   data() {
     return {
       message: "",
@@ -141,11 +136,8 @@ export default {
       imagePreview: "",
       isDoc: false,
       fileFormatError: false,
-      validFileFormats: "",
       audioFile: "",
-      audioSource: "",
-      mediaRecorder: {},
-      isRecording: false
+      audioSource: ""
     }
   },
   created() {
@@ -154,17 +146,12 @@ export default {
   mounted() {
     setResizeListeners(this.$el, ".js-autoresize", ".js-parentresize")
 
-    this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
-
-    this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
-
-    this.$root.$on("textarea-focus", () => { this.focusTextarea() })
-
-    this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
-
-    this.$root.$on("clear-footer-message", () => { this.message = "" })
-
-    if(this.cssStyle.outsideButtons) if(this.$root.$refs.chatCorpo) this.$root.$refs.chatCorpo.setOutsideButtons(this.cssStyle.outsideButtons)
+    // this.$root.$on("drop-file", (file, type) => { if(this.buttons.hasFiles) this.fileUpload(file, type, true) })
+    // this.$root.$on("toggle-msg-formatada", () => { this.toggleHSM() })
+    // this.$root.$on("textarea-focus", () => { this.focusTextarea() })
+    // this.$root.$on("resize-footer-template", () => { this.adjustChatHeight() })
+    // this.$root.$on("clear-footer-message", () => { this.message = "" })
+    // if(this.cssStyle.outsideButtons) if(this.$root.$refs.chatCorpo) this.$root.$refs.chatCorpo.setOutsideButtons(this.cssStyle.outsideButtons)
   },
   methods: {
     closeEmojis() {
@@ -176,7 +163,7 @@ export default {
       }
     },
     away() {
-      this.openFiles = false
+      if(this.$refs[`${this.textId}-file`]) this.$refs[`${this.textId}-file`].openFiles = false
     },
     setDefaultMessage(msg) {
       this.message = msg
@@ -205,7 +192,12 @@ export default {
       if(this.textareaSettings.disabled) return false
 
       if(this.fileFormatError) {
-        this.$toasted.global.formatoInvalido()
+        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
         return false
       }
 
@@ -249,7 +241,7 @@ export default {
 
       const messageAux = this.formatMessage(this.message)
       if(this.verifyMessage()){
-        if(messageAux.message || this.showFilePreview || this.audioFile) {
+        if(messageAux || this.showFilePreview || this.audioFile) {
           this.$emit("send-message", messageAux)
           const objMessage = this.returnObjectMessage(messageAux)
           this.$emit("obj-message", objMessage)
@@ -266,166 +258,115 @@ export default {
     },
     resetFooterData() {
       if(this.audioFile) this.deleteAudio()
-      if(this.showFilePreview) this.deleteFile()
+      if(this.showFilePreview) this.$refs[`${this.textId}-file`].deleteFile()
       this.message = ""
       this.sendFinalMessage()
       resetTargets(this.$el, ".js-autoresize", ".js-parentresize", "38px")
       this.focusTextarea()
     },
-    activeFormatHourMessage() {
-      return formataHoraMensagem(false)
-    },
     returnObjectMessage(message) {
       return {
         message,
-        data: this.$store.getters.getDataServer ? this.$store.getters.getDataServer.slice(0, 10) : '',
-        hora: this.activeFormatHourMessage(),
-        anexo: this.showFilePreview ? this.file  : false,
-        imgAnexo: this.imagePreview,
+        attachment: this.showFilePreview ? this.file  : false,
         isDoc: this.isDoc,
-        audio: this.audioFile ? this.audioFile : false,
-        audioAnexo: this.audioSource,
-        seq: null
+        imagePreview: this.imagePreview,
+        isAudio: this.audioFile ? true : false,
+        audioAttachment: this.audioSource
       }
     },
-    toggleFiles() {
-      this.openFiles = !this.openFiles
+    setFileVars(fileObj) {
+      const { file, showFilePreview, imagePreview, isDoc, fileFormatError } = fileObj;
+
+      this.file = file
+      this.showFilePreview = showFilePreview
+      this.imagePreview = imagePreview ? imagePreview : ""
+      this.isDoc = isDoc
+      this.fileFormatError = fileFormatError
     },
-    selectImage() {
-      if(this.$store.getters.getChatBlocker) return this.toggleFiles()
-      const fileInput = document.querySelector(`#file-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    openImage(imagePreview) {
+      this.$emit("open-image", imagePreview)
     },
-    selectDoc() {
-      if(this.$store.getters.getChatBlocker) return this.toggleFiles()
-      const fileInput = document.querySelector(`#doc-${this.textId}`)
-      if(fileInput) fileInput.click()
-      if(!fileInput) if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError()
+    setAudio(audioObj) {
+      const { audioFile, audioSource } = audioObj
+      this.audioFile = audioFile
+      this.audioSource = audioSource
     },
-    isFileValid(type) {
-      const extensions = type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions
-      const regex = new RegExp("("+extensions+")", "i")
-
-      if(regex.test(this.file.name)) return true
-
-      this.$toasted.global.formatoInvalido()
-      return false
+    deleteAudio() {
+      this.$refs[`${this.textId}-mic`].deleteMediaRecorder()
+      this.audioFile = ""
+      this.audioSource = ""
     },
-    fileUpload(event, type, externalCall) {
-      this.openFiles = false
-      if(this.showFilePreview) this.deleteFile()
+    returnFileType(file, stopAlert) {
+      const imgRegex = new RegExp("\.("+this.fileSettings.imagesExtensions+")", "i")
+      if(imgRegex.test(file.name)) return "img"
 
-      const fileReader = new FileReader()
+      const docRegex = new RegExp("\.("+this.fileSettings.docsExtensions+")", "i")
+      if(docRegex.test(file.name)) return "doc"
 
-      this.file = !externalCall ? event.target.files || event.dataTransfer.files : event
-
-      if(!this.file.length) {
-        this.file = []
-        return
+      if(!stopAlert) return
+      if (!document.querySelector(".toasted.toasted-primary.error")) this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+      const str = {
+        img: this.fileSettings.imagesExtensions.split("|").join(", "),
+        doc: this.fileSettings.docsExtensions.split("|").join(", ")
       }
+      this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
+      return false
+    },
+    filesHandler(files) {
+      const fileType = this.returnFileType(files[0], true)
+      let invalidFile = false
+      files.forEach(file => {
+        const singleFileType = this.returnFileType(file, true)
+        if(!singleFileType) {
+          invalidFile = true
+          file.invalid = true
+        }
+        file.imgOrDoc = singleFileType ? singleFileType : ""
+      })
 
-      this.file = this.file[0]
-      if(!externalCall) {
-        const selector = type === "img" ? `#file-${this.textId}` : `#doc-${this.textId}`
-        document.querySelector(selector).value = ""
-      }
-
-      this.showFilePreview = true
-      if(type === "img") {
-        fileReader.onload = () => { this.imagePreview = fileReader.result }
-      }
-
-      if(this.isFileValid(type)) {
-        if(type === "img") fileReader.readAsDataURL(this.file)
-        if(type === "doc") this.isDoc = true
-
-        this.focusTextarea()
-        this.fileFormatError = false
+      if(!invalidFile) {
+        this.$refs[`${this.textId}-file`].fileUpload(files, fileType, true)
       }else {
-        this.fileFormatError = true
-        this.validFileFormats = `${type === "img" ? this.fileSettings.imagesExtensions : this.fileSettings.docsExtensions} ${this.dictionary.msg_extensoes_aceitas}`
+        this.$toasted.global.defaultError({ msg: this.dictionary.msg_formato_invalido })
+        const str = {
+          img: this.fileSettings.imagesExtensions.split("|").join(", "),
+          doc: this.fileSettings.docsExtensions.split("|").join(", ")
+        }
+        this.$toasted.global.showValidFormats({ msg: `Imagens: ${str.img} - Documentos: ${str.doc} ${this.dictionary.msg_extensoes_aceitas}` })
       }
     },
-    deleteFile() {
-      this.file = []
-      this.isDoc = false
-      this.showFilePreview = false
-      this.imagePreview = ""
-      this.fileFormatError = false
-      this.validFileFormats = ""
-    },
-    openImage() {
-      this.$store.dispatch("toggleBlocker", { state: true, origin: "visualizar-imagem" })
-      this.$store.dispatch("setLinkImagem", this.imagePreview)
-    },
-    initAudioRecorder() {
-      navigator.mediaDevices.getUserMedia({ audio: true })
-        .then(stream => {
-          this.mediaRecorder = new MediaRecorder(stream)
-          const audioChunks = []
-          this.mediaRecorder.ondataavailable = eventData => { audioChunks.push(eventData.data) }
-          this.mediaRecorder.onstop = () => {
-            const blob = new Blob(audioChunks, { type: "audio/mpeg" })
-            blob.lastModifiedDate = new Date()
-            blob.name =  `im-audio-file-${this.$store.getters.getNomeOpe}-${parseInt(Math.random() * 5000)}`
-            const reader = new FileReader()
-            reader.readAsDataURL(blob)
-            reader.onloadend = () => {
-              this.audioFile = new File([blob], `${blob.name}.mpeg`, { type: blob.type })
-              this.audioSource = reader.result
-            }
-            stream.getTracks().forEach(track => track.stop())
-          }
-
-          this.toggleAudioRecorder()
-        },
-        error => {
-          this.$toasted.global.defaultError({ msg: this.dictionary.msg_permitir_audio })
-          console.error("error audio recorder: ", error)
-        })
-    },
-    toggleAudioRecorder() {
-      if(!this.mediaRecorder.state) return this.initAudioRecorder()
-
-      this.isRecording = !this.isRecording
-
-      if(this.isRecording) return this.mediaRecorder.start()
-      return this.mediaRecorder.stop()
-    },
-    deleteAudio() {
-      this.mediaRecorder = {}
-      this.audioFile = ""
+    dropFile(e) {
+      try {
+        e.stopPropagation()
+        e.preventDefault()
+        const files = e.dataTransfer.files.length ? e.dataTransfer.files : ""
+        this.filesHandler(files)
+      }catch(e) {
+        console.error("Erro drop file")
+        console.error(e)
+      }
     },
     pasteImage(e) {
-      if(e.clipboardData.files.length && !this.buttons.hasFiles) {
-        e.preventDefault()
-        return
-      }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
-        const file = e.clipboardData.files
-
-        let fileType = ""
-        const imgRegex = new RegExp("("+this.fileSettings.imagesExtensions+")", "i")
-        if(imgRegex.test(file[0].name)) fileType = "img"
-
-        const docRegex = new RegExp("("+this.fileSettings.docsExtensions+")", "i")
-        if(docRegex.test(file[0].name)) fileType = "doc"
-
-        if(fileType) {
-          this.fileUpload(file, fileType, true)
-        }else {
-          this.$toasted.global.formatoInvalido()
-          this.$toasted.global.formatosValidos()
+      try {
+        if(e.clipboardData.files.length && !this.buttons.hasFiles) {
+          e.preventDefault()
+          return
+        }else if(e.clipboardData.files.length && this.buttons.hasFiles) {
+          const files = e.clipboardData.files
+          this.filesHandler(files)
         }
+      }catch(e) {
+        console.error("Nao foi possivel colar a/o imagem/documento")
+        console.error(e)
       }
     },
   },
   destroyed() {
-    this.$root.$off("drop-file")
-    this.$root.$off("toggle-msg-formatada")
-    this.$root.$off("textarea-focus")
-    this.$root.$off("clear-footer-message")
-    this.$root.$off("resize-footer-template")
+    // this.$root.$off("drop-file")
+    // this.$root.$off("toggle-msg-formatada")
+    // this.$root.$off("textarea-focus")
+    // this.$root.$off("clear-footer-message")
+    // this.$root.$off("resize-footer-template")
   }
 }
 </script>
@@ -504,7 +445,7 @@ ul {
     z-index: 1;
     color: #444;
     position: relative;
-    top: 28px;
+    top: 30px;
     left: 5px; }
     .text-footer-container .max-characters.no-width {
       width: 0; }
@@ -591,7 +532,7 @@ ul {
           font-size: 1rem; }
   .text-footer-container .text-footer-files-container {
     position: absolute;
-    right: -55px;
+    right: 0;
     top: -55px;
     padding: 5px;
     background-color: rgba(0, 0, 0, 0.4);
@@ -601,6 +542,7 @@ ul {
     justify-content: space-between;
     z-index: 1; }
     .text-footer-container .text-footer-files-container.horizontal {
+      right: -55px;
       flex-direction: column; }
     .text-footer-container .text-footer-files-container .files-btn {
       transition-duration: 300ms;
@@ -629,29 +571,39 @@ ul {
       .text-footer-container .text-footer-files-container .files-btn.docs {
         background-color: #7986cb; }
   .text-footer-container .text-footer-preview-container {
+    cursor: default;
     position: absolute;
-    background-color: #AAA;
+    left: 0;
+    background-color: rgb(225, 225, 225);
     border-top-left-radius: 5px;
     border-top-right-radius: 5px; }
     .text-footer-container .text-footer-preview-container.isDoc {
       top: -50px;
       width: 100%;
       height: 45px; }
-    .text-footer-container .text-footer-preview-container.isImg {
+    .text-footer-container .text-footer-preview-container.isImg, .text-footer-container .text-footer-preview-container.isMultiple {
       top: -205px;
       width: 100%;
       height: 200px; }
       .text-footer-container .text-footer-preview-container.isImg .text-footer-image-preview {
         height: 170px; }
     .text-footer-container .text-footer-preview-container.isError {
-      top: -155px;
+      top: -80px;
       width: 100%;
-      height: 150px; }
+      height: 75px; }
     .text-footer-container .text-footer-preview-container .text-footer-exclude-file {
       position: absolute;
       top: 5px;
       right: 5px;
-      cursor: pointer; }
+      cursor: pointer; 
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 1rem;
+      min-height: 1rem;
+      background-color: #FFF;
+      border-radius: 50%;
+      }
       .text-footer-container .text-footer-preview-container .text-footer-exclude-file svg {
         transition: color 200ms;
         color: #e9594a; }
@@ -674,6 +626,7 @@ ul {
         max-height: 98%;
         padding: 2%; }
     .text-footer-container .text-footer-preview-container .text-footer-invalid-format {
+      color: #222;
       padding: 10px; }
       .text-footer-container .text-footer-preview-container .text-footer-invalid-format h3 {
         font-weight: 500; }

package/src/lib-components/Loader/Loader.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="req-loader-container" :class="{'align-right' : alignRight, 'light-bg' : hasBg}">
+    <div class="req-loader" :class="{'big' : size == 'big'}"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    hasBg: {
+      type: Boolean,
+      required: false
+    },
+    alignRight: {
+      type: Boolean,
+      required: false
+    },
+    size: {
+      type: String,
+      required: false,
+      default: "small"
+    }
+  }
+}
+</script>
+
+<style>
+.req-loader-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.req-loader-container.light-bg {
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: inherit;
+}
+.req-loader-container.align-right {
+  justify-content: flex-end;
+} 
+.req-loader-container.align-right .req-loader {
+  margin-right: 15px;
+}
+
+.req-loader {
+  border: 2px solid #CCC;
+  border-top: 2px solid #333;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  animation: spin 2s linear infinite;
+}
+.req-loader.big {
+  width: 40px;
+  height: 40px;
+  animation: spin 3s linear infinite;
+}
+.req-loader.slow {
+  animation: spin 4s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+</style>